整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
在HTML5得到了廣泛的應(yīng)用不管是在微信還是在app中，特別是在微信開發(fā)中通常會(huì)遇到要實(shí)現(xiàn)音頻或者視頻的播放功能，如背景音樂，視頻介紹等。如何實(shí)現(xiàn)自動(dòng)播放功能呢？純的H5頁面在手機(jī)端中是無法實(shí)現(xiàn)自動(dòng)播放的，移動(dòng)端瀏覽器大部分是禁用video和audio的autoplay功能而且很多移動(dòng)瀏覽器也不支持首次js調(diào)用play方法進(jìn)行播放，只有用戶手動(dòng)點(diǎn)擊了播放后暫停，然后用代碼進(jìn)行play就可以。這樣做主要是為了防止一些不必要的自動(dòng)播放浪費(fèi)流量。
下面的代碼是實(shí)現(xiàn)用戶第一次觸摸后實(shí)現(xiàn)的播放和微信app下的自動(dòng)播放：
function autoPlay() {
/* 自動(dòng)播放效果，解決瀏覽器或者APP自動(dòng)播放問題 */
function browserHandler() {
startPlay(true);
document.body.removeEventListener('touchstart', browserHandler);
}
document.body.addEventListener('touchstart', browserHandler);
/* 自動(dòng)播放效果，解決微信自動(dòng)播放問題 */
function weixinHandler() {
startPlay(true);
document.addEventListener("WeixinJSBridgeReady", function () {
startPlay(true);
}, false);
document.removeEventListener('DOMContentLoaded', weixinHandler);
}
document.addEventListener('DOMContentLoaded', weixinHandler);
}
開源精選》是我們分享Github、Gitee等開源社區(qū)中優(yōu)質(zhì)項(xiàng)目的欄目，包括技術(shù)、學(xué)習(xí)、實(shí)用與各種有趣的內(nèi)容。本期推薦的是一個(gè)開源的HTML5流媒體播放器——PearPlayer.js。
PearPlayer是完全用JavaScript寫的開源HTML5流媒體播放框架，實(shí)現(xiàn)了融合HTTP（含HTTPS、HTTP2）和WebRTC的多協(xié)議、多源、低延遲、高帶寬利用率的無插件Web客戶端流媒體加速能力。基于H5的MSE（Media Source Extension）技術(shù)將來自多個(gè)源節(jié)點(diǎn)的Buffer分塊喂給播放器，再加上精心設(shè)計(jì)的算法可實(shí)現(xiàn)最優(yōu)的調(diào)度策略及對(duì)各種異常情況的處理，PearPlayer由此能在保證用戶流暢視頻體驗(yàn)的前提下最大化P2P率。
首先通過script標(biāo)簽導(dǎo)入pear-player.min.js：
<script src="./dist/pear-player.min.js"></script>或者使用CDN：
<script src="https://cdn.jsdelivr.net/npm/pearplayer@latest"></script>假設(shè)用video標(biāo)簽播放以下視頻，HTML如下：
<video id="pearvideo" src="https://qq.webrtc.win/tv/Pear-Demo-Yosemite_National_Park.mp4" controls>只需以下幾行代碼，即可將PearPlayer綁定到video標(biāo)簽：
<script>
/**
* 第一個(gè)參數(shù)為video標(biāo)簽的id或class
* opts是可選的參數(shù)配置
*/
if (PearPlayer.isMSESupported()) {
var player = new PearPlayer('#pearvideo', opts);
}
</script>至此，就已經(jīng)添加播放器了，無需任何插件。
開源地址：https://gitee.com/PearInc/PearPlayer.js
HTML5video元素與audio元素屬性詳解
video元素和audio元素的屬性有很多，使用的方法也大同小異，在以往的實(shí)例中，我們分別介紹了video元素和audio元素在HTML5中的效果，其中也包括屬性的使用方法，本篇中將為大家介紹video元素和audio元素屬性的使用方法。
1.SRC屬性
設(shè)置音頻或視頻的URL地址。示例代碼如下圖所示：
HTML5中SRC屬性的使用方法
2.autoplay屬性
設(shè)置當(dāng)頁加載時(shí)，是否自動(dòng)播放音頻或視頻文件。如果需要自動(dòng)播放音頻/視頻文件，則添加該屬性，否則不添加該屬性，示例代碼如下圖所示：
HTML5中autoplay屬性的使用方法
3.preload屬性
設(shè)置頁面加載時(shí)，是否對(duì)音頻/視頻文件進(jìn)行預(yù)加載。preload屬性有三個(gè)可供選擇的值：none表示不進(jìn)行預(yù)加載；metadata表示僅加載元數(shù)據(jù)，即音頻/視頻文件的大小、第一幀、播放列表和持續(xù)時(shí)間等；auto表示加載全部音頻/視頻文件。示例代碼如下圖所示：
HTML5preload屬性的使用方法
4.poster屬性
該屬性是video元素屬性，設(shè)置當(dāng)視頻不可用時(shí)，向用戶展現(xiàn)一幅圖片。示例代碼如下圖所示：
HTML5中poster屬性的使用方法
5.loop屬性
設(shè)置是否循環(huán)播放音頻/視頻文件。如果要循環(huán)播放音頻/視頻文件，則添加該屬性，否則不添加該屬性。示例代碼如下圖所示：
HTML5中l(wèi)oop屬性的使用方法
6.controls屬性
設(shè)置是否添加瀏覽器自帶的播放控制器，其中包括播放、暫停和聲音等控件。如果需要顯示播放器，則添加該屬性，否則不添加該屬性。示例代碼如下圖所示：
HTML5中controls屬性的使用方法
7.width元素和height屬性
這兩個(gè)屬性是video元素屬性，width屬性用于指導(dǎo)視頻的寬度，height屬性用于指導(dǎo)視頻的高度，單位均為像素（px）。示例代碼如下圖所示：
HTML5中width元素和height屬性的使用方法
8.muted屬性
設(shè)置當(dāng)頁面加載時(shí)，播放器是否被靜音。如果需要靜音，則添加該屬性，否則不添加該屬性。示例代碼如下圖所示：
HTML5中muted屬性的使用方法
只要自己多練習(xí)，對(duì)代碼足夠熟悉就能夠運(yùn)用的比較好了，video元素與audio元素屬性的使用方法還是比較簡(jiǎn)單的。了解跟多精彩文章請(qǐng)加我們的官方微信：pyyuanxing。謝謝大家的觀看。祝大家：生活愉快、身體健康。
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
