H5内联视频
概述
微信上很多H5页面都会有会动的像视屏的页面,这样的效果很棒。从技术上来说,这个其实就是视屏,不过没有控制播放的按钮罢了。它们还有一个专业的名字——内联视频。下面我把自己对内联视屏的学习记录下来,供以后开发时参考,相信对其他人也有用。
内联视屏的实现
目前内联视屏只能在ios端和微信浏览器(QQ浏览器内核)里面实现。
在ios端,只需要给video加上playsinline属性就能使它内联播放,代码如下:
<video id="video" x-webkit-airplay="allow" webkit-playsinline playsinline src="video.mp4"></video>
在微信端,QQ浏览器内核对video做了优化,使它能够支持内联播放,只需要加上x5-video-player-type和x5-video-player-fullscreen属性即可。实例如下:
<video id="video" x5-video-player-type="h5" x5-video-player-fullscreen="true" x-webkit-airplay="allow" webkit-playsinline playsinline src="video.mp4"></video>
这样就实现了video在ios端和微信端的内联播放。(注意不要写controller,不然会出现控制条)
内联视屏全屏播放
对于video类元素,我们把它的宽高都设置为100%会没有效果,如果屏幕尺寸和视屏本身的尺寸不相同的话,屏幕底部或者边上都会有黑块。那么怎么让视屏铺满屏幕呢?
方法是利用object-fit属性,它就和background-size一样,能够使元素平铺。代码示例如下:
//对应background-size: 100% 100%;
.fill { object-fit: fill; }
//对应background-size: contain;
.contain { object-fit: contain; }
//对应background-size: cover;
.cover { object-fit: cover; }
//用户不大
.none { object-fit: none; }
.scale-down { object-fit: scale-down; }
值得一提的是:
- object-fit属性不仅可用于video元素,其实它可以用于任何元素。
- object-fit属性不兼容ie,其它都兼容的很好,移动端可以放心使用。
内联视屏的控制
内联元素的播放可以通过timeupdate 和 ended这两个事件来控制,它的进度则可以用currentTime来获取或者控制。示例如下:
video.addEventListener('timeupdate', function (e) {
console.log(video.currentTime) // 当前播放的进度
})
video.addEventListener('ended', function (e) {
// 播放结束时触发
})
H5内联视频的更多相关文章
- H5内联视频总结
概述 之前写过h5内联视频,总结了一下当时做微信视频类h5的心得,随着工作中越来越多的接触h5,我有了更多的心得与经验,记下来供以后开发时参考,相信对其他人也有用. 内联视频的播放 内联视频需要用户主 ...
- H5 内联 SVG
HTML5 内联 SVG HTML5 画布 HTML5 画布 vs SVG HTML5 支持内联 SVG. 什么是SVG? SVG 指可伸缩矢量图形 (Scalable Vector Graphics ...
- 微信小程序内联h5页面,实现分享
在小程序内直联h5的页面(pages/webview/webview.js),该页面为<web-view>的容器,使用<web-view>组件 <web-view wx: ...
- 第48天学习打卡(HTML 行内元素和块元素 列表 表格 视频和音频 页面结构分析 iframe内联框架 表单语法 )
行内元素和块元素 块元素 无论内容多少,该元素独占一行 (p.h1-h6) 行内元素 内容撑开宽度,左右都是行内元素的可以排在一行 (a.strong.em...) 列表 什么是列表 ...
- CSS3与页面布局学习总结(二)——Box Model、边距折叠、内联与块标签、CSSReset
一.盒子模型(Box Model) 盒子模型也有人称为框模型,HTML中的多数元素都会在浏览器中生成一个矩形的区域,每个区域包含四个组成部分,从外向内依次是:外边距(Margin).边框(Border ...
- 学习笔记——关于HTML(含HTML5)的块级元素和行级(内联)元素总结
1.首先我们要知道什么是块级元素和行级(内联)元素? 块级(block)元素的特点: ①总是在新行上开始: ②高度,行高以及外边距和内边距都可控制: ③宽度缺省是它的容器的100%,除非设定一个宽度: ...
- 关于HTML(含HTML5)的块级元素和行级(内联)元素总结
1.首先我们要知道什么是块级元素和行级(内联)元素? 块级(block)元素的特点: ①总是在新行上开始: ②高度,行高以及外边距和内边距都可控制: ③宽度缺省是它的容器的100%,除非设定一个宽度: ...
- Css中的两个重要概念:块状元素和内联元素
一.display:block display:block就是将元素显示为块级元素,一般是其他元素的容器,可容纳内联元素和其他块状元素,块状元素排斥其他元素与其位于同一行,宽度(width)高度(he ...
- web兼容学习分析笔记--块级、内联、内联块级元素
一.块级.内联.内联块级元素 (1)块级元素:block **独占一行 **可设置width,height,margin,padding **内部可包含块级或内联元素 (3)内联(行内)元素:inli ...
随机推荐
- 剑指offer例题——反转链表
题目描述 输入一个链表,反转链表,输出新链表的表头 程序编写 将链表反转 public class Solution { public ListNode ReverseList(ListNode he ...
- Cuda9.2发布
经过一次跳票,没有很多人注意(才怪)的cuda9.2终于发布了,官方介绍如下: CUDA 9.2 includes updates to libraries, a new library for ac ...
- linux shell并发执行命令
一般我们在linux上十一shell命令的批量执行操作,一般使用for或者while 循环进行操作,但是这样有一个问题,for或者while本质上是串行的,并不能,如果某一个命令执行耗费的时间比较长, ...
- 关于 web 页面 占满全屏
页面一般可以分成三部分,头部,底部,中间内容部分. 一般不用考虑中间高度部分,因为可以靠内容撑开,然后让底部到达底部.但是当中间内容太少时,底部就会顶不到底部. 方法1.中间部分给一个最小高度(min ...
- LR基础理论详解
本人参考了大神的博客(https://blog.csdn.net/cyh_24/article/details/50359055),写的非常详细,在此整理一下要点 逻辑斯蒂分布 基础公式了解 二项逻辑 ...
- linux服务器系统负载监控-shell脚本
一.监控服务器系统负载情况: 1.用uptime命令查看当前负载情况(1分钟,5分钟,15分钟平均负载情况) # uptime 15:43:59 up 186 days, 20:04, 1 us ...
- blockchain[z]
https://medium.com/programmers-blockchain/creating-your-first-blockchain-with-java-part-2-transactio ...
- centos 7 安装pip
1.首先检查centos 有没有安装python-pip 包, >>yum install python-pipnotice:NO package python-pip available ...
- PHP开发——超全局数组变量
概述 l JS中的变量分两类:局部变量.全局变量. l PHP中的变量分三类:局部变量.全局变量.超全局变量. l 局部变量:在函数内部声明的变量,就是局部变量.函数执行完毕,局部变量就消失了. ...
- Python开发——数据类型【数字】
布尔型 bool型只有两个值:True 或 False 我们将bool值归类为数字,习惯上:1表示true,0表示false 整型 int(整型) 在32位机器上,整数的位数为32位,取值范围为-2* ...