整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
在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小時內與您取得聯系。
