在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)系。