H5内联视频
2024-10-13 02:20:02
概述
微信上很多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) {
// 播放结束时触发
})
最新文章
- JavaScript学习01 语言简介、基本使用和变量声明
- Action<;T1, T2>;委托
- Linux USB摄像头驱动【转】
- [转]何时使用委托而不使用接口(C# 编程指南)
- C#细节忽略的问题:int 与 int?
- Lambda 表达式的示例-来源(MSDN)
- UICollectionView基础学习
- 2017-3-10 SQL server 数据库 T--SQL语句
- shell实现centos7双网卡修改网卡名eth0,eth1,并设置网络
- python --- 基数排序算法
- java jdk动态代理(proxy)
- LaTeX技巧561:LaTeX如何让每一章带有目录?
- python从零开始 -- 第1篇之环境搭建
- 【翻译】从头开始写一个时间序列数据库-Writing a Time Series Database from Scratch
- ajax设置默认值ajaxSetup()方法
- FIT9132 Introduction to Databases
- 01-Javascript简介(了解)
- [转载]为什么有些MP4文件在Chrome浏览器上播放不了?
- windbg !logexts(自带的监控API)
- hdu 4253(经典题目:二分+最小生成树)