手机浏览器自动播放视频video(设置autoplay无效)

  • 网站建设 2020-02-15 分享新闻到:
<返回列表

1、问题的提出

某一天接了个需求,需要在手机的H5页面内加入视频,我开开心心做完,准备交付的时候,问题来了,PM想要用户一进入页面,视频就开始播放,不需要用户手动点击。

2、尝试解决

加autoplay

“视频自动播放”这个需求是ok的,那我就在video标签上加个autoplay属性嘛,在PC端浏览器里面试了一下,运行流畅,没有遇到什么问题,但是放在手机浏览器里面打开,就跟没设置autoplay是一样的。

监听canplay

那不行的话,我在页面加载完成的时候,监听video的canplay,然后执行play(),应该可以运行了吧?然而放到手机里一看,还是不行。


  1.  
    <video id="video" src="video.mp4" controls></video>
  2.  
    var video = document.querySelector('#video');
  3.  
    video.addEventListener('canplay', function () {
  4.  
    video.play();
  5.  
    })

3、思考

问题来了,加autoplay不行,可以理解,可能手机浏览器不支持这个属性吧,但是我监听视频加载完成,手动去play(),这是程序常规方法,为什么也不行? 我尝试在监听回调里面加了个alert,发现没有弹出框。 所以我很长一段时间认为,手机浏览器无法自动播放视频,是因为内存大小的限制,导致无法监听video的加载完成。

4、解决方案

方案1 使用弹框

昨天在segment上游荡,发现了原来现在的手机浏览器是不允许网页中视频自动播放的,只有与用户进行了一次交互动作,才可以播放视频。(音频同理,这里就不重复提) 我尝试了一下,在页面上加一个弹框,用户点击了弹框之后(相当于一次交互完成),开始播放视频,发现是可以播放的,部分代码如下。


  1.  
    <!DOCTYPE html>
  2.  
    <html lang="en">
  3.  
    <head>
  4.  
    <meta charset="UTF-8">
  5.  
    <meta name="viewport"
  6.  
    content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, width=device-width">
  7.  
    <title>视频自动播放</title>
  8.  
    <style>
  9.  
    html, body {
  10.  
    width: 100%;
  11.  
    height: 100%;
  12.  
    }
  13.  
    .video-container {
  14.  
    width: 300px;
  15.  
    height: 600px;
  16.  
    display: flex;
  17.  
    flex-direction: column;
  18.  
    justify-content: center;
  19.  
    align-items: center;
  20.  
    overflow: hidden;
  21.  
    margin: 0 auto;
  22.  
    }
  23.  
    #video {
  24.  
    display: block;
  25.  
    width: 100%;
  26.  
    }
  27.  
    #mask {
  28.  
    width: 100%;
  29.  
    height: 100%;
  30.  
    background: rgba(0, 0, 0, 0.83);
  31.  
    position: absolute;
  32.  
    top: 0;
  33.  
    left: 0;
  34.  
    z-index: 2;
  35.  
    display: flex;
  36.  
    flex-direction: row;
  37.  
    justify-content: center;
  38.  
    align-items: center;
  39.  
    }
  40.  
    .pop-container {
  41.  
    width: 250px;
  42.  
    height: 200px;
  43.  
    background: white;
  44.  
    border-radius: 5px;
  45.  
    display: flex;
  46.  
    flex-direction: column;
  47.  
    align-items: center;
  48.  
    justify-content: center;
  49.  
    }
  50.  
    button {
  51.  
    width: 50px;
  52.  
    height: 30px;
  53.  
    border-radius: 4px;
  54.  
    }
  55.  
    </style>
  56.  
    </head>
  57.  
    <body>
  58.  
     
  59.  
    <div class="video-container">
  60.  
    <video id="video" src="video.mp4"></video>
  61.  
    </div>
  62.  
    <div id="mask">
  63.  
    <div class="pop-container">
  64.  
    <p>页面内有自动播放视频 请注意流量</p>
  65.  
    <button οnclick="playVideo()">我知道了</button>
  66.  
    </div>
  67.  
    </div>
  68.  
    <script>
  69.  
    function playVideo() {
  70.  
    document.getElementById('mask').style.display = 'none';
  71.  
    var video = document.querySelector('#video');
  72.  
    video.play();
  73.  
    }
  74.  
    </script>
  75.  
    </body>
  76.  
    </html>

所以解决视频自动播放的一般做法是,在页面加载的时候弹框与用户产生交互,然后才能开始自动播放(如此看来,手机浏览器是真的很重视用户的流量了。)

存在的问题

按照上面的方法,只要想要在手机端页面中实现 进入页面,视频立即自动播放,就必须要借助一个额外的动作去引导与用户发生一次交互,那岂不是很丑,有没有办法是可以不借助弹框呢?答案是 有的。

方案2 使用jsmpeg.js

jsmpeg是一款视频解码器,具体怎么用,可以百度相关文档,实话说我对此也不熟悉,第一次听见的时候是听说jsmpeg可以实现网页端的视频直播功能,这一次用来解决视频自动播放的需求也是借鉴别人的想法。 关键代码如下:(前提:项目中已经引入了jsmpeg.min.js)


  1.  
    <canvas id="canvas" height="750" width="750"></canvas>
  2.  
     
  3.  
    页面加载完成的时候执行下面的js代码:
  4.  
    var canvas = document.querySelector('#canvas');
  5.  
    // 注意这里需要将video.mp4转换成ts格式的文件 才能生效
  6.  
    var player = new JSMpeg.Player('video.ts', { canvas: canvas, loop: false, autoplay: false, audio: true });
  7.  
    player.audioOut.unlock(this.onUnlocked);
  8.  
    player.play();
  9.  
     
  10.  
    // onUnlocked方法
  11.  
    function onUnlocked() {
  12.  
    player.volume = 1;
  13.  
    }

这样即使不跟用户产生交互 视频也能自动播放了, 注意点 1.demo必须放在服务器上面跑才能正常加载ts文件,如果是在本地的话,不能直接拖进浏览器运行,需要起个本地服务器 2.ts文件编码方式必须为MPEG编码,考虑到现在先进的ts编码方式是H.264了,之前用H.264编码的ts发现播放不了 存在的问题 1.这样播出的视频是没有声音的 附参考链接:微信Android自动播放视频(可交互,设置层级,无控制条,非X5)ffmpeg,jsmpeg.js,.ts视频

5、补充

1.虽然最后不管通过什么方法,算是实现了视频自动播放的需求,但是在真正播放的示例中,你会发现,使用video标签的时候,虽然设置了视频的宽高,但是不起作用,所以需要在video中使用下面的属性 <video id="video" src="" controls webkit-playsinline="webkit-playsinline" playsinline></video>  这样就可以在固定区域播放视频了。 2.借助方案1的思路,其实可以实现用户上传视频时的预览


  1.  
    <input type="file" id="filepicker" accept="video/mp4" οnchange="chooseVideoInput()">
  2.  
    <div class="video-container">
  3.  
    <video id="video" src="" controls webkit-playsinline="webkit-playsinline" playsinline></video>
  4.  
    </div>
  5.  
    <script>
  6.  
    function chooseVideoInput() {
  7.  
    var files = document.getElementById('filepicker').files[0];
  8.  
    var video = document.getElementById('video');
  9.  
    // 注意下面3行代码
  10.  
    var url = URL.createObjectURL(files);
  11.  
    video.src = url;
  12.  
    video.play();
  13.  
    }
  14.  
    </script>

3.将mp4转换成jsmpeg可播放的ts文件的方法 mac os下安装homebrew,之后使用brew install jsmpeg,运行下面命令:ffmpeg -i in.mp4 -f mpegts -codec:v mpeg1video -codec:a mp2 -b 0 out.ts (其中in.mp4和out.ts填写原视频的路径以及转出ts的路径),亲测有效

6、总结

其实关于浏览器video的问题困扰了我很久,昨日在segment上浏览到“chrome66 禁止自动播放后,有什么比较好的方法实现audio的自动播放吗”这样一个提问的时候,进去看到回答,突然想起video是不是也是一样的情况,今天看了下,果然是类似的,解了很久的疑问,所以勉励自己一定要善于发现并举一反三。 上面提到的不论是解决方案或者说补充的,大概能解决一大半手机浏览器视频相关的问题,剩下的问题有机会再补充。

分享新闻到:

更多阅读

destoon6.0和7.0电脑PC端访问手机

网站建设 2020-03-20
destoon6.0电脑PC端访问手机版的方法 mobile目录下 common.inc.php 文件 注释这一行//......查看全文

程序员对post和get区别的分析

网站建设 2020-02-22
IT界知名的程序员曾说:对于那些月薪三万以下,自称IT工程师的码农们,其实......查看全文

DiscuzX3.2和3.3升级DiscuzX3.4的方法

网站建设 2020-02-22
DiscuzX3.4官方 Git 地址: https://gitee.com/ComsenzDiscuz/DiscuzX DiscuzX3.4下载地址:Git/S......查看全文
返回全部新闻
扫描二维码分享到微信
确 认

合作伙伴: 云多商城 邦匠装修网 健康第一站

Copyright © 2014-2034 云南多网科技有限公司 版权所有 滇ICP备14005946号-51

扫描二维码关注我们:多网科技
确 认