HTML5 手机端播放视频时自动全屏

作者:frank 发表日期:2016-07-12 15:15:50 更新日期:2016-08-22 12:20:16 分类:猿文色

摘要

HTML5 手机端播放视频时自动全屏,兼容Android,IOS,微信。

正文

目前各个桌面浏览器对全屏API的支持情况

Standard Blink (Chrome & Opera) Gecko (Firefox) Edge Safari (WebKit)
Document.fullscreen webkitIsFullScreen mozFullScreen webkitIsFullScreen webkitIsFullScreen
Document.fullscreenEnabled webkitFullscreenEnabled mozFullScreenEnabled unprefixed webkitFullscreenEnabled
Document.fullscreenElement webkitFullscreenElement mozFullScreenElement unprefixed webkitFullscreenElement
Document.onfullscreenchange onwebkitfullscreenchange onmozfullscreenchange unprefixed onwebkitfullscreenchange
Document.onfullscreenerror onwebkitfullscreenerror onmozfullscreenerror unprefixed onwebkitfullscreenerror
Document.exitFullscreen() webkitExitFullscreen() mozCancelFullScreen() unprefixed webkitExitFullscreen()
Element.requestFullscreen() webkitRequestFullscreen() mozRequestFullScreen() unprefixed webkitRequestFullscreen()

目前各个手机浏览器对全屏API的支持情况

经过测试,Android平台的浏览器支持前缀webkit的全屏API,包括微信端也支持,而且任何HTML元素都可以使用全屏功能。IOS只支持video元素的全屏设置,OSX支持所有HTML元素的全屏设置。

Android监听全屏更新的事件为webkitfullscreenchange,触发全屏事件为webkitRequestFullScreen。

ISO的监听全屏更新事件比较特殊,进入全屏会触发video元素的webkitbeginfullscreen事件,退出全屏时会触发video元素的webkitendfullscreen事件。触发video元素的全屏事件为webkitEnterFullscreen。

如何实现全屏播放视频

产品经理的需求:点击一个链接时候自动全屏播放视频,不要显示视频控件。

<a href="javascript:void(0)" onclcik="playVideo()">
    <img src="">
    <div class="detail">
        <h3 class="primary">视频欣赏</h3>
        <p>产品视频</p>
    </div>
    <video style="display:none;" src=""></video>
</a>

...
// 获取video元素
var video = ...;

// 视频开始播放显示视频控件,暂停播放隐藏视频控件
video.on('play', function() {
    video.show();
}).on('pause', function() {
    video.hide();
});

// 点击a时播放视频
function playVideo() {
    // android,请求全屏
    if (typeof video.webkitRequestFullScreen === 'function') {
      video.webkitRequestFullScreen();
    }

    //ios,请求全屏
    if(typeof videoElement.webkitEnterFullscreen === 'function') {
        videoElement.webkitEnterFullscreen();
    }
}

// android 监听屏幕全屏事件,进入全屏播放视频,退出全屏时自动暂停播放
$(document).on('webkitfullscreenchange', function(event) {
    if(document.webkitIsFullScreen) {
        video.play();
    } else {
        video.pause();
    }
 });

 // ios 监听屏幕全屏事件,进入全屏播放视频,退出全屏时自动暂停播放
 $(video).on('webkitbeginfullscreen', function() {
     video.play();
 }).on('webkitendfullscreen', function() {
     video.pause();
 });

如上述代码,初始状态下video标签display设为none。

  • 播放视频时:当点击a标签时,执行请求全屏API,Android和IOS的方式不同,进入全屏后开始播放视频。
  • 暂停视频时:退出全屏后暂停视频播放。
  • 隐藏显示视频控件:监听video的play和pause事件,开始播放时显示video,暂停播放时隐藏video。

通过上面设置,可以实现在Android、微信、IOS下点击链接显示并全屏播放视频,退出全屏时隐藏并暂停视频播放。