小程序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的小童鞋来说应该困扰了不少.很多小童鞋硬是抓破脑袋也没有办法解决这个问题,那我们今天就来探 ...
随机推荐
- Mongoose学习(1)
1.Schema : 一种以文件形式存储的数据库模型骨架,不具备数据库的操作能力 Model : 由Schema发布生成的模型,具有抽象属性和行为的数据库操作对 Entity : 由Mod ...
- AbstractFactory Pattern
AbstractFactory模式用来解决这类问题:要创建一组相关或者相互依赖的对象. AbstractFactory Pattern结构图 实现: #ifndef _PRODUCT_H_ #defi ...
- codeforces B. Calendar 解题报告
题目链接:http://codeforces.com/problemset/problem/304/B 题目意思:给出两个日期,需要算出这两个日期之间有多少日. 细心模拟就可以了.特别要注意的是,两个 ...
- [原创]Java开发如何在线打开Word文件
此方案使用了PageOffice产品实现在线打开Word文档: 1. 首先从PageOffice官网下载产品开发包,http://www.zhuozhengsoft.com/dowm/ ,下载Page ...
- C3P0 配置
C3P0是一个开源的JDBC连接池. 在Spring中,C3P0的一些配置,介绍如下(只列了一部分,不是全部) <!-- c3p0连接池配置 --> <bean id="d ...
- jQuery comet
下面程序是例用从数据端推送信息,原理是每隔10秒读取一下data.txt文件,看有木有新的数据输入,如果有,则alert文件内容. hmtl代码是 <!DOCTYPE html> < ...
- hdu-5773 The All-purpose Zero(LIS)
题目链接: The All-purpose Zero Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/65536 K (J ...
- sipp 对asterisk 进行压力测试
测试环境 asterisk 192.168.106.170 版本astrisk1.8 sipp 192.168.106.141 sipp版本3.3 安装依赖包yum install make g ...
- CPU、内存、硬盘分区的检测.py
cpu_mem_directories.py CPU.内存.硬盘分区的检测 #!/usr/bin/env python #coding:utf-8 import psutil import tim ...
- 关于group_concat函数拼接字符超长的问题
昨天测试的人火急火燎的找我,跟我说数据不对!说明情况后我去查看,原来是数据上有个子查询出来的字段没有完全展示 问题很明显,就是数据被截断了.下面贴上我写的查询 wyids_是正确的显示,通过它子查询出 ...