首页 > 鼠标键盘 >

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

电脑杂谈　发布时间：2019-06-26 03:11:12　来源：网络整理

fly文件_tud文件怎么播放_fly文件怎么播放

事实上，由于最终能够成功提交订单的用户只有一个，为了减轻下单页面服务器的负载压力，可以控制进入下单页面的入口，只有少数用户能进入下单页面，其他用户直接进入秒杀结束页面。但由于落地页里的视频需要用户点击才能播放，且一般视频文件过大，所以个人建议gif或页面动态效果最为合适。该插件是直接调用优酷视频，它可以创建一个页面，专门添加优酷视频，支持自动获取视频缩略图、视频标题（可自定义标题）、视频时长等，点击即可在当前页面播放，非常方便哦。

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

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

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

问题来了，加autoplay不行，可以理解，可能手机浏览器不支持这个属，但是我视频加载完成，手动去play()，这是程序常规方法，为什么也不行？

我尝试在回调里面加了个alert,发现没有弹出框。

所以我很长一段时间认为，手机浏览器无法自动播放视频，是因为内存大小的限制，导致无法video的加载完成。

tud文件怎么播放_fly文件怎么播放_fly文件

iphone不仅能够浏览和浏览网页、发送和接收带有附件的电子邮件、组织播放和购买音乐视频，甚至还可以浏览谷歌地图。百度移动搜索引擎中为更好满足用户信息需求，会同时为用户提供pc网页和mobile网页，但目前大多数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>

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

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

jsmpeg是一款视频，具体怎么用，可以百度相关文档，实话说我对此也不熟悉，第一次听见的时候是听说jsmpeg可以实现网页端的视频直播功能，这一次用来解决视频自动播放的需求也是借鉴别人的想法。

关键代码如下：（前提：项目中已经引入了jsmpeg.min.js）

tud文件怎么播放_fly文件怎么播放_fly文件

<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;
}

这样即使不跟用户产生交互视频也能自动播放了，

注意点

游戏通用多开器会加载驱动，如果加载驱动被拦截，可能无法正常使用.如果出现此内情况需在安全软件提示时放行本程序加载内核模块。有没加 unloaddll 都没关系，一定要重新启动服务后才正常（试了原先托盘加载，再改服务加载，依然自动关），但是一关机，下次开机开 cmd 又会自动关闭，这样不是每次开机都得重新启动服务。在java.lang.classloader的loadclass()方法中，先检查是否已经被加载过，若没有加载则调用父类加载器的loadclass()方法，若父加载器为空则默认使用启动类加载器作为父加载器。

2.ts文件编码方式必须为MPEG编码，考虑到现在先进的ts编码方式是H.264了，之前用H.264编码的ts发现播放不了

存在的问题

1.这样播出的视频是没有声音的

fly文件怎么播放_fly文件_tud文件怎么播放

附参考链接：微信Android自动播放视频（可交互，设置层级，无控制条，非X5）ffmpeg,jsmpeg.js,.ts视频

1.虽然最后不管通过什么方法，算是实现了视频自动播放的需求，但是在真正播放的示例中，你会发现，使用video标签的时候，虽然设置了视频的宽高，但是不起作用，所以需要在video中使用下面的属性

这样就可以在固定区域播放视频了。

2.借助方案1的思路，其实可以实现用户上传视频时的预览

<input type="file" id="filepicker" accept="video/mp4" onchange="chooseVideoInput()">
<div class="video-container">
  <video id="video" src="" controls webkit-playsinline="webkit-playsinline" playsinline></video>
</div>
<script>
  function chooseVideoInput() {
    var files = document.getElementById('filepicker').files[0];
    var video = document.getElementById('video');
    // 注意下面3行代码
    var url = URL.createObjectURL(files);
    video.src = url;
    video.play();
  }
</script>

3.将mp4转换成jsmpeg可播放的ts文件的方法

tud文件怎么播放_fly文件怎么播放_fly文件

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的路径)，亲测有效

其实关于浏览器video的问题困扰了我很久，昨日在segment上浏览到“chrome66 禁止自动播放后fly文件怎么播放，有什么比较好的方法实现audio的自动播放吗”这样一个提问的时候，进去看到回答，突然想起video是不是也是一样的情况，今天看了下，果然是类似的，解了很久的疑问，所以勉励自己一定要善于发现并举一反三。

经过对大量视频信号进行测试，基于目前的视频压缩算法，dcif分辨率比half d1能更好解决cif清晰度不够高和d1存储量高、价格高昂的缺点，用来解决cif和4cif，特别是在512kbps码率之间，能获得稳定的高质量图像，满足用户对较高图像质量的要求，为视频编码提供更好的选择。基于目前的视频压缩算法，dcif分辨率比halfd1能更好解决cif清晰度不够高和d1存储量高、价格高昂的缺点，用来解决cif和4cif，特别是在512kbps码率之间，能获得稳定的高质量图像，满足用户对较高图像质量的要求，为视频编码提供更好的选择。由于ie本身的“垄断性”（虽然名义上ie并非垄断，但实际上，特别是从windows 95年代一直到xp初期，就市场占有率来说ie的确借助windows的东风处于“垄断”的地位）而使得trident内核的长期一家独大，微软很长时间都并没有更新trident内核，这也导致了后面的两个后果：一是trident内核曾经几乎与w3c标准脱节（2005年）二是trident内核的大量 bug等安全性问题没有得到及时解决，然后加上一些致力于开源的开发者和一些学者们公开自己认为ie浏览器不安全的观点，也有很多用户转向了其他浏览器，firefox和opera就是这个时候兴起的。

参考链接：

chrome66 禁止自动播放后，有什么比较好的方法实现audio的自动播放吗

微信Android自动播放视频（可交互，设置层级，无控制条，非X5）ffmpeg,jsmpeg.js,.ts视频

mac osx 下 homebrew安装

mac 系统安装使用 ffmpeg

HTML5音视频播放(Video,Audio)和常见的坑处理

video在微信和QQ浏览器中不全屏播放解决

本文来自电脑杂谈，转载请注明本文网址：
http://www.pc-fly.com/a/bofangqi/article-108472-1.html

相关阅读

发表评论　　请自觉遵守互联网相关的政策法规，严禁发布、暴力、反动的言论