专栏首页EasyNVREasyNVR、EasyDSS二次开发---RTMP、HLS流在web页面进行无插件播放(demo)

EasyNVR、EasyDSS二次开发---RTMP、HLS流在web页面进行无插件播放(demo)

不管是基于EasyNVR还是EasyDSS,都是支持无插件直播,这也是未来视频直播的一个趋势。对于传统的浏览器插件播放谁用谁知道;

以上是软件自带播放展示

背景需求

对于EasyNVR和EasyDSS的使用方式大概分为两大类,一类是直接将软件作为视频能力平台来进行使用;另一类就是将视频能力集成到自身的业务系统来,这就涉及到相关的接口调用和一些对应的功能的集成。对与前端的web播放器的集成也是一个 需要注意的方向;通常也有很多客户会咨询到关于web播放器集成的相关问题,本篇博客也是对应web流媒体播放器的demo介绍。

解决方案

对于流媒体的web播放器有很多,不管的ckplay、flowplayer、腾讯、阿里等;我们的Easy系列软件使用的是Videojs,因此本篇主要介绍的也是Videojs如何实现HLS、RTMP流的web播放;

引用相关文件
<link rel="stylesheet" href="plugins/video-js-5.19.2/video-js.css"/>
<script src="plugins/video-js-5.19.2/video.js"></script>
<script src="plugins/video-js-5.19.2/videojs-contrib-hls4.js"></script>
<script src="plugins/videojs-hotkeys/videojs.hotkeys.min.js"></script>
<script type="text/javascript" src="plugins/jquery-3.3.1.min.js"></script>
HTML部分

主要就是给videojs一个初始化的标签;

<div class="content-wrapper">
        <div class="video-wrapper" style="padding-bottom:56.25%;position:relative;margin:0 auto;">
            <div class="video-inner" style="position:absolute;top:0;bottom:0;left:0;right:0;">
                <video id="videojs" class="video-js vjs-default-skin vjs-big-play-centered" style="width: 100%; height: 100%;" controls preload="none"
                    poster="" x5-video-player-fullscreen=”true”,x5-video-player-type=”h5”>
                    <source src="" type=""></source>
                    <p class="vjs-no-js">
                        To view this video please enable JavaScript, and consider upgrading to a web browser that
                        <a href="http://videojs.com/html5-video-support/" target="_blank">
                        supports HTML5 video
                        </a>
                    </p>
                </video>     
            </div>
        </div>
    </div>
js部分;

播放器的初始化;

    function setupPlayer(videoUrl) {
        videoUrl = videoUrl || "rtmp://121.40.50.44/live/stream_1";
        if(videoUrl.indexOf("rtmp") == 0){
            $("#videojs").find("source").attr("src",videoUrl).attr("type","rtmp/mp4");
            player = videojs("videojs",{
                notSupportedMessage : '您的浏览器没有安装或开启Flash,戳我开启!',
                techOrder : ["flash"],
                autoplay : true
            });
            videojs('videojs').ready(function() {
              this.hotkeys({
                volumeStep: 0.1,
                seekStep: 5,
                enableVolumeScroll: false,
                enableModifiersForNumbers: false
              });
            });
            player.on("error",function(e){
                var $e = $(".vjs-error .vjs-error-display .vjs-modal-dialog-content");
                var $a = $("<a href='http://www.adobe.com/go/getflashplayer' target='_blank'></a>").text($e.text());
                $e.empty().append($a);
            })                            
        } else {
            var timeout = 10000;
            var step = 500;
            var cnt = 0;
            function test(){
                cnt += step;
                $.ajax(videoUrl,{
                    type : "HEAD",
                    global : false,
                    complete :function(xhr,ts){
                        if(cnt > timeout){
                            alert("请求数据失败");
                            return;
                        }
                        //xhr.status == 0 , when cross domain request not found
                        if(xhr.status == 404 || xhr.status == 0 || (xhr.status != 200 && !isPC())){
                            console.log("video is no ready, waiting...");
                            setTimeout(test,step);
                        }else{
                            $("#videojs").find("source").attr("src", videoUrl).attr("type","application/x-mpegURL");
                            player = videojs("videojs",{
                                autoplay : true
                            }); 
                        }
                    }
                })
            }
            test();
        }
    }

在自身事件需要的地方调用播放器的初始化方法来完成视频播放;

以解析地址传递留地址参数来完成播放为例;

/解析传递来的参数

var $_GET = (function(){
        var url = window.document.kk.toString();
        var u = url.split("?");
        if(typeof(u[1]) == "string"){
            u = u[1].split("&");
            var get = {};
            for(var i in u){
                var j = u[i].split("=");
                get[j[0]] = j[1];
            }
            return get;
        } else {
            return {};
        }
    })();
$(function(){
        var VideoUrl = $_GET['url'];  
        if(VideoUrl){
            setupPlayer(VideoUrl);
        }else{
            alert("请正确输入流地址!");
        }
    })

效果展示

播放EasyNVR转发出来的RTMP和hls流

用http-server起一个本地的服务;

RTMP播放效果:

通过EasyNVR获取到RTMP流地址;

HLS播放效果:

通过EasyNVR获取到HLS流地址;

VideoJS官网地址:http://docs.videojs.com/

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 如何使用H265视频播放器EasyPlayer.JS调用videojs播放EasyNVR转发的视频流?

    经过了多年的研发探索,TSINGSEE青犀视频团队开发了三种不同的视频流媒体服务器软件EasyNVR,EasyGBS,EasyDSS,三个平台都可以进行网页无插...

    EasyNVR
  • EasyNVR H5无插件直播方案前端架构之:videojs的使用

    在引入videojs加载文件的前提下,可以在video标签中添加属性值“data-setup=’{}’”,并且在class属性中添加“video-js”;二者缺...

    EasyNVR
  • 海康大华网络摄像头视频直播流媒体服务器视频广场显示暂无快照的问题解决

    我们的EasyNVR视频流媒体服务器分为Windows版本和linux版本,两个版本没有任何区别,是为了适应不同使用者的操作习惯。一般我在进行新版本测试的时候,...

    EasyNVR
  • rtmp、m3u8直播小记

    最近项目做跟视频有关的,一个是直播,一个是播放视频。使用video标签。视频直播有很多协议,rtmp、rtsp、hls等就自己去了解,业务有做到就会了解一些。

    wade
  • popcorn-js视频Video框架简单用法

    <div> <video class="video" id="ourvideobig" preload="auto" control...

    纯粹是糖
  • EasyNVR H5无插件直播方案前端架构之:videojs的使用

    在引入videojs加载文件的前提下,可以在video标签中添加属性值“data-setup=’{}’”,并且在class属性中添加“video-js”;二者缺...

    EasyNVR
  • AI 算法解决二进制安全问题,腾讯安全NeurIPS 2020论文有新方法

    不久前,人工智能顶会 NeurIPS 2020 放出接收论文列表,论文接收率创历史新低。而腾讯安全科恩实验室使用 AI 算法解决二进制安全问题的一项研究《Cod...

    机器之心
  • JavaScript循环使用label标签,以及break与continue

    break语句会立即退出循环,强制继续执行循环后面的语句,但是break只能跳出当前循环,在有多个循环嵌套时,如果要跳出外循环,需要借助label语句。 c...

    HaC
  • 了解vSphere中的BPDU筛选器功能

    本文介绍并提供了有关vSphere 5.1 Distributed Switch中新BPDU筛选器功能的示例。 一、什么是bpdu 桥接协议数据单元(BPDU)...

    孙杰
  • 腾讯云linux服务器搭建wordpress视频教程

    linux服务器针对php及其友好,配置好Memcached加速或者Redis加速,可以完全解决wordpress在国内卡的问题,如果说你觉得WordPress...

    Wordpress教程

扫码关注云+社区

领取腾讯云代金券