网站建设
建站资讯Website News

您的位置:主页 > 营销知识 > 建站资讯 > 移动端 HTML5 video 视频播放实践

移动端 HTML5 video 视频播放实践

上海网站建设公司建站资讯2017-09-05

移动端 HTML5 使用原生

此篇文章,主要是总结我在项目中遇到的一些坑,也为后面的小伙伴在使用 video 标签时,提供一些思路和方法。

在移动端售后项目中,我主要遇到两个问题:

  • iOS WebView 中异步添加 video 标签无法播放。

  • iPhone6s iOS WebView 中异步添加 video 标签需要点击两次才能播放。

一、项目背景

提升网购用户体验,还是要聚焦在售后服务的环节上。所以此次售后体验的飞跃项目(从京东 app -我的-退换/售后进入)对 H5 页面进行了重构,对业务功能进行了升级。

? ?

其中一个升级模块就是在申请售后环节,在之前仅有拍照基础上,增加了音频和小视频的功能,借此机会为用户提供更丰富的多媒体反馈功能。技术上采用的是 H5   JDReact 结合的模式。用户在点击录视频 icon 会触发调用React原生应用录制小视频,后端同学采用轮询方式往 H5 页面动态添加 video 标签。之后用户可以马上点击刚刚录制的小视频播放观看。算是在申请时候为用户增加的一个更为直观反馈的功能,也便于京东客服的处理。

二、了解 video 标签一些基本的属性

既然决定用 video 标签实现视频回显播放,那么先了解 video 标签都有哪些重要的属性。

属性名字描述
src视频媒体地址
autoplay自动播放。iOS 蜂窝网络和 safari 中不支持。WebView 中可单独配置开启。 安卓可能支持该属性
loop循环播放。iOS 支持,Android 可能支持
controls播放器控制条。iOS 和 Android 支持
width视频的宽。iOS 和 Android 都需要给出
height视频的高。iOS 和 Android 都需要给出
poster封面图片。iOS 支持,Android 不一定支持,而且各产商表现差异大

对于 width ?和 height,比较流行的做法还是以 1px * 1px 的形式放在视觉边缘的位置。以此避免隐藏和设置 0 宽高的 video,使得视频处于未激活状态。另外 poster 封面的在各个平台的兼容性并不好,体验较差。所以我直接用  来做一个初始化展示的效果图。

1

2

3

4

5

<p class="video-wrap">

????src="../media/demo.jpg">

????<video id="video"height="2"width="1"src="../videoDemo.mp4;">

????<span class="play">


这里有一个小技巧,对于宽高。初始设定,可以使用 1px * 2px。对于安卓手机全屏播放基本会初始竖屏播放,而不是先横屏播放,然后加载视频后得到视频宽高比后再切换成竖屏播放。

三、了解 video 标签一些基本的方法

在打算使用 video 标签时,我专门去网上找了一些资料。这样可以在遇到兼容性的时候做到有备无患。

方法iOSAndroid
play只是要播放视频,响应的是 video.play() 方法,并不代表已经开始播放和 iOS 一样,仅是响应 video.play() 方法
durationchange会执行一次,一定会获取到视频的 duration可能会执行多次,只有最后一次才能获取到真实的 duration,前面的 duration 都是0;但低版本 Android 可能获取到的 duration 是 0 或 1
canplay可以认为是视频元素没有问题,可以运行,没有更多含义了,基本用不上同 iOS
canplaythrough会有明确的缓冲,表示可以流畅播放了没有什么用,视频仍然会卡住,数据可能还没有开始加载
playing明确表示播放开始了依然没有用,视频可能并没有开始播放
progress有明确的下载,可以获取到当前的 buffer,并且全部下载完毕后不在触发不一定有明确的数据下载,并且全部下载完毕后依然继续触发
timeupdate会有明确的进度变化,可以获取到currentTime进度不一定变化,currentTime 可能总是 0,但是第一次有 currentTime 变化的timeupdate 事件一定代表了视频开始播放了
erroriOS 中会有明确的错误抛出Android 中某些浏览器会莫名其妙的抛出 error
stalled网络状况不佳,导致视频下载中断在没有 play 之前,也可能会抛出该事件

虽然 video 的方法有很多,但是兼容性还是比较头疼的。不过在项目我仅仅用到了 play,load 方法。下面说一下我遇到的问题吧。

iOS WebView 中异步添加 video 标签无法播放。

在售后的项目中,因为需要支持 JDReact 原生应用提供多媒体功能。所以小视频只需要在京东 app 内 WebView 做适配就可以。第一个问题就出现了。后端将视频 video 标签动态添加到页面中后,iOS app 内点击播放。发现无法播放。而在安卓版的京东 app 内 x5 内核的浏览器是可以播放的。

1

2

3

4

5

6

mediaWrapper.delegate(\'.load-video .video-wrap\',\'click\',function(){????????

????????video.play();

????????video.addEventListener(\'ended\',function(){

????????????video.webkitExitFullscreen();

????????});

});

当然有小伙伴会表示,那不动态添加 video 标签,采用更换 src 的方式来回显用户录制的小视频。经过测试,依然无法播放。究其原因,video 标签和audio 标签不同于一般的 img 多媒体标签,更换 DOM 或者属性值就能使其激活生效。video 标签和 audio 标签本身具有了时间特性,因而采用了不同的模式。所以在播放视频之前,需要调用 video 的 load 方法来重新加载更新视频。

1

2

3

4

5

6

7

8

9

10

11

12

13

mediaWrapper.delegate(\'.load-video .video-wrap\',\'click\',function(){

????????if(videoIsPlay){

????????????video.play();

????????????returnfalse;

????????}

????????video.load();//PAY ATTENTION!????????????????

????????video.play();

????????video.addEventListener(\'ended\',function(){

????????video.webkitExitFullscreen();

????????????videoIsPlay=true;

????????});

});

iPhone7 ?的京东 app 可以播放视频了。感觉革命已经成功。突然发现自己的 iPhone6s 依然不能播放,再点一次突然又可以播放了。这又是什么原因?

iPhone6s iOS WebView 中异步添加 video 标签需要点击两次才能播放

我们先看一下需要点两次效果图。


京东 app 采用的内嵌 UIWebView 内核浏览器,如果比较古老的话,会触发需要用户点两次 bug。load 方法和 play 方法在 iOS 上都是需要用户手动触发的。就算你在点击回调里写两次 load 方法或者 play 方法依然是没用的。不过可以有效利用移动端 click 事件的 300ms 延迟特点来解决两次点击播放问题。给 video 同时绑定两个事件 tap 和 click 事件,在 tap 事件和 click 都调用 load 方法。并且在 click 事件中调用 play 方法。这样就能完美解决该问题了。

1

2

3

4

5

6

7

mediaWrapper.delegate(\'.load-video .video-wrap\',\'tap\',function(){

??????varvideo=document.getElementById(\'my-video\');

??????if(videoIsPlay){

??????????returnfalse;

??????}

??????video.load();

});

看一下修改后的效果图:


四、最后总结

我的移动端的经验还不是很丰富,对于 video 标签,只能说里面水太深~。不过赶在618之前圆满的完成了售后客服的飞跃项目,获得不少成长,感谢并肩战斗的后端、设计、产品等同学,特别感谢封面设计:竹子。最后我们来整体看一下售后小视频的功能吧。


?

参考资料

HTML5 Video Events and API

https://www.w3.org/2010/05/video/mediaevents.html

Exploring HTML 5’s Audio/Video Multimedia Support

http://www.devx.com/webdev/Article/43324

移动端 HTML5

http://zhaoda.net/2014/10/30/html5-video-optimization/

原文标题:移动端 HTML5 video 视频播放实践
欢迎您访问,如有疑问请联系客服
TAG[db:关键字],上海网站建设,上海网站制作,上海APP开发

最新案例

相关文章

更多最新文章

网站关键词

上海云轩网络版权所有 Copyright©2008-2018 http://www.lvon8.com All Rights Reserved 备案号:沪ICP备14049216号