如何对h.265视频播放器easyplayer.js实现音频开启与关闭控制?附代码(代码片段)

TSINGSEE TSINGSEE     2023-03-12     242

关键词:

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了解。

如何对h.265视频播放器easyplayer.js实现音频开启与关闭控制?附代码(代码片段)

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

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

...EasyCVR、EasyGBS、EasyDSS、EasyNVR等均集成了我们自主研发的EasyPlayer视频流媒体系列播放器,可支持H.264/H.265视频编码,并拥有多个版本包括EasyPlayer-RTSP、EasyPlayer.js、EasyPlayerPro等,用户可以根据自身的需求对其进行二次开... 查看详情

easynvr录像回看h.265视频流,出现播放异常如何解决?

EasyNVR视频边缘计算网关具备视频采集、直播、转码、分发等能力,在录像功能方面,不仅可以调取录像视频直接回放,还可以将录像文件通过接口调用下载。而且,EasyNVR还能支持H.265编码格式的视频播放,极... 查看详情

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

H.265视频流媒体播放器EasyPlayer是TSINGSEE青犀视频推出的一款开放性和功能性都十分强大的播放器,可支持H.264/H.265视频播放,性能稳定、播放流畅,还包含多个版本,比如EasyPlayer-RTSP、EasyPlayer-Pro、EasyPlayer.js等等。... 查看详情

h.265视频流媒体播放器easyplayer.js如何获取时间戳回调?

EasyPlayer是可支持H.264/H.265视频播放的流媒体播放器,性能稳定、播放流畅,可支持的视频流格式有RTSP、RTMP、HLS、FLV、WebRTC等,具备较高的可用性。EasyPlayer还拥有Windows、Android、iOS版本,其灵活的视频能力,极... 查看详情

无插件视频播放器easyplayer如何实现web端兼容h.264与h.265码流?

随着互联网、物联网、移动互联网、云服务等技术的不断进步,推动安防行业朝着高清化、智能化、集成化的方向发展。视频技术在安防领域的应用也不再仅仅局限于考虑压缩特性本身,而是逐渐开始向网络适应性、用... 查看详情

使用 AVPlayer 播放 H.265 视频文件

】使用AVPlayer播放H.265视频文件【英文标题】:PlayingH.265videofileusingAVPlayer【发布时间】:2018-03-0610:01:37【问题描述】:我正在尝试使用AVPlayer(iOS10,11中的两者)播放H.265视频文件。以下是代码:letfileUrl=Bundle.main.url(forResource:"sample... 查看详情

easyplayer播放flv的h.265编码视频时出现两个flv请求,如何调整?(代码片段)

EasyPlayer播放器是TSINGSEE青犀视频维护的一个RTSP播放器项目,EasyPlayer遵循了标准流媒体码流协议,进行实时播放以及码流录制,在数据流的播放速度以及画质的解码显示上均做了大量深度的优化。在网页通过EasyPlayer播... 查看详情

h.265流媒体播放器easyplayer.js如何调用vue?

EasyPlayer是我们推出的比较受欢迎的流媒体播放器,TSINGSEE青犀视频的平台也集成了该播放器。EasyPlayer不仅能支持H.264/H.265视频的播放,还具有多个系列版本,如EasyPlayer-RTSP、EasyPlayer.js、EasyPlayerPro等。当前EasyPlayer还含... 查看详情

如何支持rtsp播放h.265(hevc)流

随着H.265的普及,越来越多的开发者希望大牛直播SDK能支持低延迟的RTSPH.265播放,并分享相关经验:实现思路:对rtsp来说,要播放h265只要正确解析sdp和rtp包即可.下面对这些相关内容做一些介绍.1.H265NalUnitHeader简单介绍:H264的NalUni... 查看详情

h265格式视频怎么播放

...里以nginx-1.21.5为例)。2、接着,在我们npm上下载最新的EasyPlayer。3、将element里猛册的所有文件全部复制到nginx里的html里,并将之前的index.html备枝中宏份。4、然后启动Nginx服务,在nginx.conf里查培禅看index.html页面的端口(默认80端... 查看详情

采用h5多屏直播时,h.264和h.265视频流混合播放导致的卡顿问题解析

...是基于H.265转为H.264编码实时播放。TSINGSEE视频团队研发的EasyPlayer.js为纯H.265播放器,广泛应用于EasyDSS、EasyGBS、EasyCVR、EasyNVR等平台中,为各种项目应用场景提供高清晰度的视频播放体验。但是当采用了多屏直播时,H.... 查看详情

h.265网页播放器easyplayer实现webrtc视频实时录像功能

我们在此前的文章中给大家分享过关于EasyPlayer已经实现了实时录像的功能,感兴趣的用户可以戳这篇文章:H5网页播放器EasyPlayer.js如何实现直播视频实时录像?经过我们不断地摸索和研发,EasyPlayer采用了wasm前端... 查看详情

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

EasyPlayer属于TSINGSEE青犀视频研发的性能稳定、播放流畅的H.265视频流媒体播放器,可支持的视频流格式有RTSP、RTMP、HLS、FLV、WebRTC等,支持高清画面秒开、视频播放流畅,具备较高的可用性。而且,TSINGSEE青犀视频... 查看详情

h.265视频easyplayer播放器点播flv不断加载,如何处理?

EasyPlayer视频流媒体播放器属于高开放度、高兼容性、高灵活性、可支持H.264/H.265视频编码格式的播放器,为了满足用户的个性化需求,EasyPlayer具备多个版本,如EasyPlayer-RTSP、EasyPlayer.js、EasyPlayerPro等,并且EasyPlayer... 查看详情

支持h.265网页播放的h5播放器easyplayer.js发布了

...09;直播和点播的支持,WebAssembly(wasm)》、《EasyPlayer.js开发WebH5网页播放H.265视频播放支持FLV与HLS直播与点播的过程》里面,我们提到的关于支持H.265网页播放的H5播放器EasyPl 查看详情

h.265视频流媒体easyplayer播放器无法禁用自动播放的问题修复

H.265视频流媒体播放器EasyPlayer是TSINGSEE青犀视频推出的一款开放性和功能性都十分强大的播放器。EasyPlayer不仅支持RTSP、RTMP、HTTP、HLS、UDP、RTP、File等多种流媒体协议播放,而且还支持本地文件播放、支持本地抓拍、本地录像... 查看详情

h5流媒体播放器easyplayer播放h.265视频时,画面出现进度按钮的问题修复(代码片段)

H.265流媒体播放器EasyPlayer可支持多类型的视频流格式播放,包括RTSP、RTMP、HLS、FLV、WebRTC等,还可支持H.264/H.265视频播放,属于高可靠、高可用、高稳定性的流媒体播放器。为了满足用户的多样化需求,我们也基于... 查看详情