如何對H.265視訊播放器EasyPlayer.js實現音訊開啟與關閉控制？【附程式碼】
阿新 • • 發佈：2022-05-26
EasyPlayer是可支援H.264/H.265視訊播放的流媒體播放器，效能穩定、播放流暢，可支援的視訊流格式有RTSP、RTMP、HLS、FLV、WebRTC等，具備較高的可用性。TSINGSEE青犀視訊的Easy系列視訊平臺均集成了EasyPlayer播放器作為網頁播放能力層。
EasyPlayer具備多個版本，如EasyPlayer-RTSP、EasyPlayer.js、EasyPlayerPro等，並且EasyPlayer還擁有Windows、Android、iOS版本，EasyPlayer.js還可支援Linux平臺。
近期我們對EasyPlayer.js的音訊功能進行了優化，今天和大家分享一下。
使用者在使用EasyPlayer.js時，有時候會需要控制音訊，但是播放器預設的音訊無法滿足使用者需求，於是想在自己的程式碼邏輯中增加控制音訊的開啟及開閉。我們可以通過以下方式實現。
1）首先，在播放器原始碼中加入如下程式碼：
//設定音訊 setMuted(type){ if (typeof type == "boolean") { if (this.wasmPlayer&&this.isStreamH265) {// 控制H265編碼的視訊 if (type) { this.wasmPlayer.closeAudio() }else{ this.wasmPlayer.openAudio() } } else { if (this.easyPlayer) { // 控制H264編碼的視訊 this.easyPlayer.muted(type) } } } },
2）在業務中呼叫setMuted方法控制音訊的開啟及關閉，true為禁用，false為開啟。程式碼參考如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>EasyPlayer</title> <script src="./EasyPlayer-element.min.js"></script> </head> <style> #player .easy-player { height: 400px; } </style> <body> <h4 style="width:600px;margin: auto;">EasyPlayer播放器</h4> <br> <div style="width:600px;margin: auto;"> <easy-player id="player"></easy-player> <p>列如：http://127.0.0.1:8080/flv/hls/stream.flv <a href="http://www.easydarwin.org/easyplayer/" target="_blank"> 線上演示</a></p> <p style="color:red;font-size: 12px;">注意：本例項需要以服務方式啟動 <a href="https://blog.csdn.net/weixin_43194037/article/details/108885134" target="_blank">搭建服務教程</a></p> <input type="text" id="value" value="http://192.168.0.102:18000/flv/live/stream_1_0.flv"> <button id="onPlay">播放</button> <button id="onMuted">開啟音訊</button> <button id="offMuted">關閉音訊</button> </div> <script> let player = document.getElementById('player') let onPlay = document.getElementById('onPlay'); let onMuted = document.getElementById('onMuted'); let offMuted = document.getElementById('offMuted'); let value = document.getElementById('value');// 輸入框 // 播放 onPlay.onclick = function(){ player.setAttribute('video-url', value.value||"") } // 開啟音訊 onMuted.onclick = function(){ player.getVueInstance().setMuted(false) } // 關閉音訊 offMuted.onclick = function(){ player.getVueInstance().setMuted(true) } </script> </body> </html>
EasyPlayer播放器系列專案依賴其靈活控制、低延時、高穩定的特點，已經成熟運用於多個專案場景當中，其中包括手機直播、桌面直播、遠端教育課堂直播等，使用者可以根據自身的需求對其進行二次開發或自主整合。如果大家想測試，歡迎下載EasyPlayer瞭解。