整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
在HTML5得到了广泛的应用不管是在微信还是在app中，特别是在微信开发中通常会遇到要实现音频或者视频的播放功能，如背景音乐，视频介绍等。如何实现自动播放功能呢？纯的H5页面在手机端中是无法实现自动播放的，移动端浏览器大部分是禁用video和audio的autoplay功能而且很多移动浏览器也不支持首次js调用play方法进行播放，只有用户手动点击了播放后暂停，然后用代码进行play就可以。这样做主要是为了防止一些不必要的自动播放浪费流量。
下面的代码是实现用户第一次触摸后实现的播放和微信app下的自动播放：
function autoPlay() {
/* 自动播放效果，解决浏览器或者APP自动播放问题 */
function browserHandler() {
startPlay(true);
document.body.removeEventListener('touchstart', browserHandler);
}
document.body.addEventListener('touchstart', browserHandler);
/* 自动播放效果，解决微信自动播放问题 */
function weixinHandler() {
startPlay(true);
document.addEventListener("WeixinJSBridgeReady", function () {
startPlay(true);
}, false);
document.removeEventListener('DOMContentLoaded', weixinHandler);
}
document.addEventListener('DOMContentLoaded', weixinHandler);
}
开源精选》是我们分享Github、Gitee等开源社区中优质项目的栏目，包括技术、学习、实用与各种有趣的内容。本期推荐的是一个开源的HTML5流媒体播放器——PearPlayer.js。
PearPlayer是完全用JavaScript写的开源HTML5流媒体播放框架，实现了融合HTTP（含HTTPS、HTTP2）和WebRTC的多协议、多源、低延迟、高带宽利用率的无插件Web客户端流媒体加速能力。基于H5的MSE（Media Source Extension）技术将来自多个源节点的Buffer分块喂给播放器，再加上精心设计的算法可实现最优的调度策略及对各种异常情况的处理，PearPlayer由此能在保证用户流畅视频体验的前提下最大化P2P率。
首先通过script标签导入pear-player.min.js：
<script src="./dist/pear-player.min.js"></script>或者使用CDN：
<script src="https://cdn.jsdelivr.net/npm/pearplayer@latest"></script>假设用video标签播放以下视频，HTML如下：
<video id="pearvideo" src="https://qq.webrtc.win/tv/Pear-Demo-Yosemite_National_Park.mp4" controls>只需以下几行代码，即可将PearPlayer绑定到video标签：
<script>
/**
* 第一个参数为video标签的id或class
* opts是可选的参数配置
*/
if (PearPlayer.isMSESupported()) {
var player = new PearPlayer('#pearvideo', opts);
}
</script>至此，就已经添加播放器了，无需任何插件。
开源地址：https://gitee.com/PearInc/PearPlayer.js
HTML5video元素与audio元素属性详解
video元素和audio元素的属性有很多，使用的方法也大同小异，在以往的实例中，我们分别介绍了video元素和audio元素在HTML5中的效果，其中也包括属性的使用方法，本篇中将为大家介绍video元素和audio元素属性的使用方法。
1.SRC属性
设置音频或视频的URL地址。示例代码如下图所示：
HTML5中SRC属性的使用方法
2.autoplay属性
设置当页加载时，是否自动播放音频或视频文件。如果需要自动播放音频/视频文件，则添加该属性，否则不添加该属性，示例代码如下图所示：
HTML5中autoplay属性的使用方法
3.preload属性
设置页面加载时，是否对音频/视频文件进行预加载。preload属性有三个可供选择的值：none表示不进行预加载；metadata表示仅加载元数据，即音频/视频文件的大小、第一帧、播放列表和持续时间等；auto表示加载全部音频/视频文件。示例代码如下图所示：
HTML5preload属性的使用方法
4.poster属性
该属性是video元素属性，设置当视频不可用时，向用户展现一幅图片。示例代码如下图所示：
HTML5中poster属性的使用方法
5.loop属性
设置是否循环播放音频/视频文件。如果要循环播放音频/视频文件，则添加该属性，否则不添加该属性。示例代码如下图所示：
HTML5中loop属性的使用方法
6.controls属性
设置是否添加浏览器自带的播放控制器，其中包括播放、暂停和声音等控件。如果需要显示播放器，则添加该属性，否则不添加该属性。示例代码如下图所示：
HTML5中controls属性的使用方法
7.width元素和height属性
这两个属性是video元素属性，width属性用于指导视频的宽度，height属性用于指导视频的高度，单位均为像素（px）。示例代码如下图所示：
HTML5中width元素和height属性的使用方法
8.muted属性
设置当页面加载时，播放器是否被静音。如果需要静音，则添加该属性，否则不添加该属性。示例代码如下图所示：
HTML5中muted属性的使用方法
只要自己多练习，对代码足够熟悉就能够运用的比较好了，video元素与audio元素属性的使用方法还是比较简单的。了解跟多精彩文章请加我们的官方微信：pyyuanxing。谢谢大家的观看。祝大家：生活愉快、身体健康。
*请认真填写需求信息，我们会在24小时内与您取得联系。
