播放自动视频的两个前提条件
- 设置自动播放 autoplay
- 设置静音 muted
有些限制必须有点击操作，这个看需求，如果实现不了进入页面自动播放可以考虑价格播放按钮，引导用户点击。
因为我的视频不需要显示控件，不需要全屏播放 这些就统统去掉了。
<video
src=""
id="videoRef"
autoplay
muted
x5-video-player-type="h5"
webkit-playsinline="true"
x-webkit-airplay="true"
playsinline="true"
x5-video-player-fullscreen="true"
></video>#videoRef video::-webkit-media-controls {
display: none !important;
}问题描述：由于浏览器限制，视频不能够自动播放，需要用户手势触发才可以。
解决方法：通过微信浏览器提供的WeixinJSBridgeReady做桥接后就可以绕过这一限制。
上面链接中的操作比较繁琐，在此给出简化版本（亲测可用）：
function doPlay() {
WeixinJSBridge.invoke("getNetworkType", {}, function (e) {
var $video1 = $("#video1");
var $video2 = $("#video2");
$video1[0].play();
$video2[0].play();
});
}
if (window.WeixinJSBridge) {
doPlay();
} else {
document.addEventListener(
"WeixinJSBridgeReady",
function () {
doPlay();
},
false
);
}需要注意的是，监听 WeixinJSBridgeReady 事件后，回调函数里需要调用一下 invoke，在 invoke 中操作视频才可以生效。
另外，页面不需要引入 jweixin-1.0.0.js，微信浏览器会自带 api。
来自： https://github.com/AnsonZnl/v-blog/blob/master/docs/articles/WeApp/IOS微信浏览器视频自动播放问题解决方法.md
h5页面自动播放视频、音频_关于媒体文件自动全屏播放的实现方式
在移动端（ios和android）播放视频的时候，我们即使定义了autoplay属性，仍然不能自动播放。这是由于手机浏览器为了防止浪费用户的网络流量，在默认情况下是不允许媒体文件自动播放的，除非用户自己对浏览器进行设置才能支持autoplay。
如何将视频设置为网页背景【转】
有时候为一个网页添加一个动画效果的背景，会让网页增加一定的韵味，让网页看起来与众不同。需要用到了video/标签，然后在source里面写视频的路径，autoplay用来使其自动播放，muted用来使其静音，loop为循环播放
js实现截取视频帧图片作为封面预览图
前端需要把视频文件的第一帧图像截取出来，并做为缩略图显示在页面上，这里需要利用HTML5中强大的画布canvas来实现该功能
优化 MP4 视频以便更快的网络串流
随着 Flash 的落寞 以及 移动设备的爆发性增长 ，越来越多的内容以 HTML5 视频的方式传递。在上一篇文章中你甚至能看到 使用 HTML5 视频替换 GIF 动图来优化网站访问速度 这样的技巧
js获取上传音视频的时长
获取上传视频路径，将该路径放入video标签，获取视频时长。方式一：隐藏一个音频标签，播放获取。方式二;通过new Audio的方式获取。上传之前限制一下视频的时长
移动端视频h5表现问题汇总
同屏播放视频、移动端视频预加载：由于移动端不能预加载视频，所以hack一种方案：监听WXJSBridge WeixinJSBridgeReady、微信安卓环境下需要在touchmove事件中阻止掉默认事件，否则不能触发视频播放 、 由于微信安卓版本基于x5内核，视频会出现全屏按钮，而且去不掉，会误导用户点击
Web端直接播放 .ts 视频
最近项目中需要前端播放 .ts 格式视频，捣鼓了几天学习到很多知识，也发掘了一种优秀的解决方案，项目中已存储的 .ts 切片数量众多，已经占用了NAS服务器绝大部分的资源，生成的 .m3u8 索引虽然非常小
使用 multipart/x-mixed-replace 实现 http 实时视频流
关于实时视频传输，业界已经有非常多成熟方案，分别应用在不同需求场景。本文介绍一种基于 HTTP ，非常简单、易理解的方案，实用性不强，但有助于理解 HTTP 协议。
h5视频播放踩坑记录
随着抖音、快手这类的视频类app的火爆，移动端h5视频类应用也随之兴起，使用video播放的场景也越来越多，本篇文章主要例举了移动端视频播放的一些场景和个人在开发过程中遇到的一些问题
如何实现沉浸式视频体验？
沉浸式视频体验，大致内容是一个页面里有几十个视频，用户点击其中一个视频时，该视频自动滑动到屏幕可视区域的顶部开始播放，并暂停其他视频，该视频滑出屏幕可视区域之后要自动暂停。
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!