小程序video置顶
page {
overflow-y: none;
height: 100vh;
}
.page__hd_media {
position: fixed;
width:100vw;
top:;
height: 30vh;
z-index:;
text-align: center;
}
video {
width: 100vw;
height: 100%;
}
.page__bd_media {
box-sizing: border-box;
height: 70vh;
line-height:;
position: fixed;
bottom:;
}
<view class="page" >
<view class="page__hd_media">
<video src="{{video.videoUrl}}" bindplay="bindplay" bindtimeupdate="bindtimeupdate" bindpause="bindpause" bindended="bindended" id="{{video.id}}" initial-time="{{currentTime}}"></video>
</view>
<scroll-view class="page__bd_media" scroll-y>
//页面内容
</scroll-view>
</view>
直接在video标签 position: fixed;top: 0; 不好使video还是会随着页面滑动
小程序video置顶的更多相关文章
- 小程序 video 组件同层渲染公测
小程序 video 组件同层渲染公测 各位开发者: 大家好. 小程序原生组件因脱离 WebView 渲染而存在一些使用上的限制,为了方便开发者更好地使用原生组件进行开发,我们对小程序原生组件引入了 ...
- 微信小程序——video使用总结
关于小程序video的一些基本使用方法,可点击这里稍作了解. 需求: 1.默认显示封面: 2.一个视频播放的时候,其他视频停止播放,并显示封面. 解决问题思路: 1.通过wx:if判断当前视频是否是播 ...
- 微信小程序 - video组件poster无效 / 视频播放列表
在做有关微信小程序有关视频播放页面的时候,遇到video组件设置poster无效果,然后查了下poster属性:视频封面的图片网络资源地址,如果 controls 属性值为 false 则设置 pos ...
- 微信小程序 video组件 不随页面滚动
1.页面初始化(滚动前)时,video所在位置 2.页面滚动后,video视频组件所在位置 看了别人家的小程序并不会出现这种状况.最后检查发现,是页面包裹层设置了 height:100% 导致的 顺便 ...
- 如何使用微信小程序video组件播放视频
相信很多人都有在手机上看视频的习惯,比较看视频更真实更形象.那么我们在微信小程序中如何观看视频呢?这就需要video组件的帮忙了.今天我们就给大家演示一下,如何用微信小程序组件video播放视频.我们 ...
- 微信小程序video组件出现无法播放或卡顿
微信小程序使用video组件播放视频的时候,会出现卡顿或者无法播放的问题,加一个custom-cache=”true“即可解决,这个属性文档上没有,是从小程序开发社区中get到的.
- js 实现吸顶效果 || 小程序的吸顶效果
小程序吸顶效果 <!--index.wxml--> <view class="container"> <view class='outside-img ...
- 微信小程序-video详解
在小程序火热的今天,作为IT行业的一员,我也来凑了一下热闹,话不多说了,接下来看看视频上传,和跨页面获取值的相关案例吧!! 视频上传部分代码: 视频播放 随机颜色的产生: 颜色页面的选择:
- 微信小程序内置组件web-view的缓存问题探讨
前言:博客或者论坛上面,还有自习亲身经历,发现微信小程序的webview组件的页面缓存问题相当严重,对开发H5的小童鞋来说应该困扰了不少.很多小童鞋硬是抓破脑袋也没有办法解决这个问题,那我们今天就来探 ...
随机推荐
- STM32 ~ ili9341 横屏驱动代码
void ili9341_Initializtion(void) { u16 i; RCC->APB2ENR|=<<; //使能PORTB时钟 GPIOB->CRH&= ...
- HTML中级教程 元标签
元标签对浏览器窗口中的内容不做任何事情,它们用在关于页面的像搜索引擎的归类目录信息中. 元标签meta可以使用尽可能多次如你所需,包括内容属性content(必须的).名称属性name和http-eq ...
- BZOJ 1633 [Usaco2007 Feb]The Cow Lexicon 牛的词典:dp【删字符最少】
题目链接:http://www.lydsy.com/JudgeOnline/problem.php?id=1633 题意: 给你一个长度为n的主串a,和一个有m个字符串s[i]的单词书(s[i].si ...
- 【转载】Myeclipse中实现js的提示
近期需要大量使用JS来开发,但是MyEclipse2014自带的JS编辑器没有代码提示的功能,开发效率有点低,所以安装了一个Spket的插件,过程非常简单,SVN插件的安装比这个更简单. Spket插 ...
- java.lang.Exception: Socket bind failed: [730048] 端口被占用
错误提示如下: org.apache.coyote.http11.Http11AprProtocol init 严重: Error initializing endpoint java.lang.Ex ...
- windows查看与清理dns缓存
1.windows下在命令行输入 ipconfig /flushdns 清理本地dns缓存查看dns缓存 ipconfig/displaydns2.Mac OSX下在命令行输入 lookupd ...
- C++之new和delete
new 和 delete 是 C++ 用于管理 堆内存 的两个运算符,对应于 C 语言中的 malloc 和 free,但是 malloc 和 free 是函数,new 和 delete 是运算符.除 ...
- 第一行代码笔记的思维导图(http://images2015.cnblogs.com/blog/1089110/201704/1089110-20170413160323298-819915364.png)
- Linux下使用《du》命令查看某文件及目录的大小
du -ah --max-depth=1 这个是我想要的结果 a表示显示目录下所有的文件和文件夹(不含子目录),h表示以人类能看懂的方式,max-depth表示目录的深度. du -sh 目 ...
- WordCount作业提交到FileInputFormat类中split切分算法和host选择算法过程源码分析
参考 FileInputFormat类中split切分算法和host选择算法介绍 以及 Hadoop2.6.0的FileInputFormat的任务切分原理分析(即如何控制FileInputForm ...