如何对H.265视频播放器EasyPlayer.js实现音频开启与关闭控制?附代码

Posted TSINGSEE

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何对H.265视频播放器EasyPlayer.js实现音频开启与关闭控制?附代码相关的知识,希望对你有一定的参考价值。

EasyPlayer是可支持H.264/H.265视频播放的流媒体播放器,性能稳定、播放流畅,可支持的视频流格式有RTSP、RTMP、HLS、FLV、WebRTC等,具备较高的可用性。TSINGSEE青犀视频的Easy系列视频平台均集成了EasyPlayer播放器作为网页播放能力层。

EasyPlayer具备多个版本,如EasyPlayer-RTSP、EasyPlayer.js、EasyPlayerPro等,并且EasyPlayer还拥有Windows、androidios版本,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了解。

以上是关于如何对H.265视频播放器EasyPlayer.js实现音频开启与关闭控制?附代码的主要内容,如果未能解决你的问题,请参考以下文章

流媒体播放器EasyPlayer.js如何实现动态设置解码H.265音频?

支持8K播放且低延时高并发全功能的流媒体播放器EasyPlayerPro如何播放H.265视频?

H.265网页播放器EasyPlayer添加sei数据导致视频花屏该如何解决?

无插件视频播放器EasyPlayer如何实现Web端兼容H.264与H.265码流?

H.265视频流媒体播放器EasyPlayer.js集成时出现“SourceBuffer ”报错,该如何解决?

如何在本地搭建一个EasyPlayer的H5 demo 播放H265视频流?