视频H5のVideo标签在微信里的坑和技巧
来源:互联网 发布:现场摇奖软件 编辑:程序博客网 时间:2024/06/05 23:43
视频H5のVideo标签在微信里的坑和技巧
随着 4G 的普遍以及 WiFi 的广泛使用,手机上的网速已经足够稳定和高速,以视频为主的 HTML5 也越来越普遍了,相比帧动画,视频的表现更加丰富,前段时间开发了一个以视频为主的移动端 HTML5,在这里介绍一些实践经验。
统一播放效果
我们希望视频播放时可以全屏播放,没有进度条、播放按钮等与系统相关的元素,可以在视频上方增加自定义的元素(比如一个跳过按钮),类型下面的效果:
在不同的操作系统(主要就是 iOS 和 Android),为了达到比较统一的播放效果,分别对其进行兼容。
iOS
在 iOS 上,APP 都是使用的系统自带的浏览器进行页面渲染,video 播放视频的效果是统一的,只需要考虑不同的 iOS 版本是否有不一致的地方。在 iOS 上,播放视频默认会弹出一个播放器全屏播放视频,如下效果
播放器上下有的系统默认的控制栏,可以控制视频的播放进度、音量以及暂停或继续播放,播放视频时,视频会 “浮” 在页面上,页面上的所有元素都只能是在视频下面,这种效果显然不是我们想要的。
但好在 iOS 10 Safari 中,video
新增了 playsinline
属性,可以使视频内联播放。
在 webkit 的 blog 上提到
A note about the playsinline attribute: this attribute has recently been added to the HTML specification, and WebKit has adopted this new attribute by unprefixing its legacy webkit-playsinline attribute. This legacy attribute has been supported since iPhoneOS 4.0, and accordance with our updated unprefixing policy, we’re pleased to have been able to unprefix webkit-playsinline.
iOS 10 之前的版本支持 webkit-playsinline,但是加了这个属性后,在 iOS 9 的上出现只能听到声音不能看到画面的问题,最后使用的标签代码
1
<video id="video" class="video" preload="auto" playsinline src="http://wqs.jd.com/promote/superfestival/superfestival.mp4" width="1" height="1" type="video/mp4"></video>
然后再加上这个库 iphone-inline-video一起使用。
Android
在 Android 上,因为各个软件使用的浏览器渲染引擎不一样,所以视频播放的效果差异也很大,这里主要以微信为主。微信使用的是自带的渲染引擎 TBS,默认的播放效果
在播放器的下方也是会有控制栏,视频也会 “浮” 在页面上。而 Android 是不支持 playsinline
属性使视频内联播放的。但是,如果你看过一些腾讯的视频类 HTML5,会发现它们在微信里是可以内联播放的,而这个功能是需要申请加入白名单的。
不过新版的 TBS 内核(>=036849)支持一个叫 同层播放器
的视频播放器,这个不需要申请白名单,只需给 video
设置两个属性 x5-video-player-type="h5"
和 x5-video-player-fullscreen="true"
,播放效果
当点击左上角的箭头的时,会退出播放
退出播放时,我们需要做相应的处理。TBS 有提供相应的事件,不过不同的版本有一点差异
通过监听这两个事件就可以知道当前的播放状态
1234567
document.getElementById('video').addEventListener("x5videoexitfullscreen", function(){alert("exit fullscreen")})document.getElementById('video').addEventListener("x5videoenterfullscreen", function(){alert("enter fullscreen")})
在对话框中发送
//gettbs
可以查看相关信息,tbsCoreVersion
就是当前安装的 TBS 内核版本。
video 的事件
video
支持的事件很多,但在有些事件在不同的系统上跟预想的表现不一致,在尝试比较之后,使用 timeupdate
和 ended
这两个事件基本可以满足需求
1234567
video.addEventListener('timeupdate', function (e) {console.log(video.currentTime) // 当前播放的进度})video.addEventListener('ended', function (e) {// 播放结束时触发})
视频居中
视频的宽高比是固定的,而手机的屏幕宽高比则不是,所以,为了让观看到的视频的体验尽可能一致,以宽度为先,进行适配
1234567891011121314
function handleResize() {var sWidth = 9var sHeight = 16var width = window.innerWidthvar height = window.innerHeightvar marginTop = height - (width * sHeight) / sWidthmarginTop = Math.round(marginTop)if (marginTop < -2) {video.$wrapper.css('marginTop', marginTop / 2 + 'px')} else {video.$wrapper.css('marginTop', '0')}}
- 视频H5のVideo标签在微信里的坑和技巧
- 3、H5标签 视频video
- H5 video 标签播放视频遇到的问题
- h5中视频插入标签 video
- h5 的video视频控件
- H5的video标签的属性和播放事件
- H5标签 video标签的使用
- H5学习之15 video audio 标签,以及视频 音频能够最大可能正常的方式
- [APP开发技巧] video标签在IOS和安卓上的非全屏自动播放
- h5 video标签
- H5中video标签
- H5中video标签
- 关于H5中的<video></video>标签的用法总结
- html5视频video标签的使用格式和属性
- H5 video标签在移动端,不默认全屏播放。
- HTML5-音频audio和视频video标签
- H5新属性audio音频和 video视频的控制详解(controls)
- H5研究一:定制一个最简单的H5 视频播放器<video></video>
- ASP如何获取地址栏get参数(非常简单的)
- 机器学习面试准备之三、决策树与随机森林
- 4 - 4 - Gradient Descent in Practice II - Learning Rate (9 min)
- iptables中DNAT、SNAT和MASQUERADE的理解
- Hue 安装部署 详解
- 视频H5のVideo标签在微信里的坑和技巧
- 20170131心情总结
- 【黑苹果教程】对笔记本的 DSDT/SSDT 打补丁
- 167. Two Sum II - Input array is sorted \ 122. Best Time to Buy and Sell Stock II
- foreach,IEumerable,yield
- 忘记了忘记
- NOIP 为什么要学 数学
- [Leetcode 452] Minimum Number of Arrows to Burst Balloons
- 考察深度学习基础知识的45道题目(附答案)