移动端H5点击图片全屏播放video视频

本文由清尘发表于2020-08-15 14:38最后修改于2020-08-27属于移动前端分类

以下为西瓜播放器版本,使用网页样式全屏实现 . 如使用全屏的API播放,没有办法监听在IOS端退出全屏事件,且全屏API在安卓端X5内核浏览器有黑屏等bug.
以下对返回按钮也做了事件监听,可以在返回时关闭网页样式全屏。同时保持历史记录可以返回上一页。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .vodbox{width: 300px;}
    .play_item{width: 100%; height: 100px; line-height: 100px; text-align: center; border: 1px solid; background-color: #ccc; margin-bottom: 10px;}
    .hid{display: none;}
  </style>
</head>
<body>
  <div id="test"></div>
  <div class="vodbox hid" id="vodbox">
    <div id="mse"></div>
  </div>

  <div id="play_item">
    <div class="play_item" data-vod="http://h5player.bytedance.com/video/mp4/xgplayer-demo-360p.mp4">播放视频一</div>
    <div class="play_item" data-vod="test2.mp4">播放视频二</div>
  </div>
  <script src="https://cdn.bootcdn.net/ajax/libs/zepto/1.2.0/zepto.min.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/xgplayer@2.9.6/browser/index.js" type="text/javascript"></script> 
 <script>
var vodbox = $('#vodbox');

  var player = new Player({
      id: 'mse',
      fluid: true,
      ignores: ['fullscreen'],
      playsinline: true,
      cssFullscreen: true,
  });


  $('#play_item').delegate('.play_item','click',function(){
    var vod_link = $(this).attr('data-vod');
    player.start(vod_link);
    player.play();
    player.getCssFullscreen();
    vodbox.removeClass('hid');

    window.history.pushState('', "title", "#");
  })

  player.on('exitCssFullscreen',function(){
    player.pause();
    vodbox.addClass('hid');
    history.back();
  })


window.addEventListener("popstate",function (e) {
    player.pause();
    vodbox.addClass('hid');
    },false);


 </script>
</body>
</html>

或直接使用原生video内联播放做一个全屏的视频播放弹出层,实现类似效果。如果想用原生video全屏去做,同样会遇到无法监听退出全屏事件(没法做到兼容性)而导致不能在退出全屏时,显示图片,隐藏视频video标签的效果。

另外需要注意的是:在安卓版本的X5内核内置浏览器(比如从QQ打开网页)下是没有办法通过pushState去监听系统自带的返回键的事件的。

相关文章:点击图片播放视频(弹出层页面全屏播放)