video标签设置autoplay在手机浏览器无法自动播放视频的解决方案

在video标签上加个autoplay属性,在PC端浏览器里面运行流畅,但是在手机浏览器里面打开无法播放。原来现在的手机浏览器是不允许网页中视频自动播放的,只有与用户进行了一次交互动作,才可以播放视频。(音频同理) 方案一: 在页面上加一个弹框,用户点击了
在video标签上加个autoplay属性,在PC端浏览器里面运行流畅,但是在手机浏览器里面打开无法播放。原来现在的手机浏览器是不允许网页中视频自动播放的,只有与用户进行了一次交互动作,才可以播放视频。(音频同理)
 
方案一:在页面上加一个弹框,用户点击了弹框之后(相当于一次交互完成),开始播放视频,发现是可以播放的,部分代码如下:
 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, width=device-width">
  <title>跟版网-视频自动播放</title>
  <style>
    html, body {
      width: 100%;
      height: 100%;
    }
    .video-container {
      width: 300px;
      height: 600px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      overflow: hidden;
      margin: 0 auto;
    }
    #video {
      display: block;
      width: 100%;
    }
    #mask {
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.83);
      position: absolute;
      top: 0;
      left: 0;
      z-index: 2;
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
    }
    .pop-container {
      width: 250px;
      height: 200px;
      background: white;
      border-radius: 5px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }
    button {
      width: 50px;
      height: 30px;
      border-radius: 4px;
    }
  </style>
</head>
<body>

<div class="video-container">
  <video id="video" src="video.mp4"></video>
</div>
<div id="mask">
  <div class="pop-container">
    <p>页面内有自动播放视频 请注意流量</p>
    <button onclick="playVideo()">我知道了</button>
  </div>
</div>
<script>
  function playVideo() {
    document.getElementById('mask').style.display = 'none';
    var video = document.querySelector('#video');
    video.play();
  }
</script>
</body>
</html>
 
方案2:使用jsmpeg.js
 
jsmpeg是一款视频解码器,具体怎么用,可以百度相关文档,实话说我对此也不熟悉,第一次听见的时候是听说jsmpeg可以实现网页端的视频直播功能,这一次用来解决视频自动播放的需求也是借鉴别人的想法。
关键代码如下:(前提:项目中已经引入了jsmpeg.min.js)
 
<canvas id="canvas" height="750" width="750"></canvas>
页面加载完成的时候执行下面的js代码:
var canvas = document.querySelector('#canvas');
// 注意这里需要将video.mp4转换成ts格式的文件 才能生效
var player = new JSMpeg.Player('video.ts', { canvas: canvas, loop: false, autoplay: false, audio: true });
player.audioOut.unlock(this.onUnlocked);
player.play();

//  onUnlocked方法
function onUnlocked() {
    player.volume = 1;
}
 
这样即使不跟用户产生交互 视频也能自动播放了,
注意点
1.demo必须放在服务器上面跑才能正常加载ts文件,如果是在本地的话,不能直接拖进浏览器运行,需要起个本地服务器
2.ts文件编码方式必须为MPEG编码,考虑到现在先进的ts编码方式是H.264了,之前用H.264编码的ts发现播放不了
存在的问题
1.这样播出的视频是没有声音的
 
本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除!

相关文档推荐

在video标签上加个autoplay属性,在PC端浏览器里面运行流畅,但是在手机浏览器里面打开无法播放。原来现在的手机浏览器是不允许网页中视频自动播放的,只有与用户进行了一次交互动作,才可以播放视频。(音频同理) 方案一: 在页面上加一个弹框,用户点击了
demo展示1: !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtdhtml xmlns=http://www.w3.org/1999/xhtml head meta http-equiv=Content-Type content=text/html; charset=utf-8 / tit
很多初学制作网页的朋友,可能会遇到的一个常见问题,就是在CSS中加了margin:0 auto;却没有效果,不能居中的问题,margin:0 auto;的意思就是:上下边界为0,左右根据宽度自适应,其实就是水平居中的意思,在这里说两个典型的错误引起的不能居中的问题: 1、
Dom元素 1 getElementById document.getElementById(id) 返回一个对象 2 getElementsByTagName document.getElementsByTagName(tag) 返回一个对象数组 运行使用*通配符,获取所有元素 dom.getElementsByTagName(*) 获取dom下所有子元素 3 getElementsByClass
本文实例讲述了js实现点击切换TAB标签。分享给大家供大家参考。具体如下: 这里演示的选项卡效果代码,无jq,纯JS来实现,灰色风格,没有怎么美化,或许看上去比较普通,不过兼容性和操作起来挺舒服的,风格适用于大部分的网站,或许你会用得上。 先来看看运