美文网首页
转]前端播放视频,流媒体,rtsp,rtmp,hls

转]前端播放视频,流媒体,rtsp,rtmp,hls

作者: yahzon | 来源:发表于2018-09-15 14:14 被阅读190次

    http://www.cnblogs.com/qiaojie/p/5733335.html

    rtsp

    简介
    这种协议流数据前段播放,没有特别好的解决方法,需要在本机装一个vlc 插件,依靠这个插件才能让 RTSP 协议 在网页上能播放,但是目前高版本的 Chrome 浏览器不支持 NPAPI 插件,也就是说高版本的 Chrome 浏览器还是不能播放(46 以上的版本都不行)。
    html code:

      <object type='application/x-vlc-plugin' id='vlc' width="200" height="500" events='True' pluginspage="http://www.videolan.org" codebase="http://downloads.videolan.org/pub/videolan/vlc-webplugins/2.0.6/npapi-vlc-2.0.6.tar.xz">
         <param name='mrl' value='rtsp://***********************/Streaming/Channels/1' />
         <param name='volume' value='50' />
         <param name='autoplay' value='true' />
         <param name='loop' value='false' />
         <param value="transparent" name="wmode">
         <embed id='vlc' wmode="transparent" type="application/x-vlc-plugin" width="200" height="500" pluginspage="http://www.videolan.org" allownetworking="internal" allowscriptaccess="always" quality="high" src="rtsp://***********************/Streaming/Channels/1">
      </object>
    

    js code:

    //获取 VLC js 队形 
         function getVLC(name) {
                if (window.document[name]) {
                    return window.document[name];
                }
                if (navigator.appName.indexOf("Microsoft Internet") == -1) {
                    if (document.embeds && document.embeds[name])
                        return document.embeds[name];
                } else {
                    return document.getElementById(name);
                }
            }
        
         // 根据地址切换视频
            function doGo(mrl) {
                try {
                    var vlc = getVLC("vlc"),
                        itemId = vlc.playlist.add(mrl);
                    vlc.playlist.playItem(itemId);
    
                } catch (e) {
                    console.log(e);
                }
            }
           //调用
         doGo(mrl)
    

    vlc api参考:VLC

    rsmp

    简介
    Real Time Messaging Protocol(简称 RTMP)是 Macromedia 开发的一套视频直播协议,现在属于 Adobe。所以我们就只能借助 flash 了 。 在研究 video.js 插件的时候, 看它也能提供 RTMP 的播放,这下我们就省事多了。

    html code

    <video id="vlc" class="video-js vjs-default-skin" controls  preload="none" data-setup='{}'></video>
    

    看到我没有写 source 标签,我们直接用js 来操作,做到播放 RTMP 和 HLS 的适配 .

    js code

    player.ready(function() {
        var myPlayer = this;
        myPlayer.reset();
        if (scope.type == 'hls') {
            console.log('hls');
            myPlayer.src({ type: "application/x-mpegURL", src: scope.url });
        } else {
            myPlayer.src({ type: "rtmp/flv", src: scope.url });
            console.log('rtmp');
        }
        myPlayer.load(scope.url);
        myPlayer.play();
    });
    

    我们借助 player.src() 方法就是实现,根据不同的类型设置 src 的type 就可以。但是每次我们更改地址的时候,记得调用一下 player.reset() 方法会重置播放器 。要不会有问题,切换不了。

    hls

    简介
    Http Live Streaming (简称HLS) ,它在移动 Web 浏览器支持挺好,所以现在好多移动端直播都在用此协议。但在 PC Chrome,Firefox 上不支持,所以还需要借助flash 。在研究的过程中发现了 video.js 这个插件,代码托管 在 github 上,开源。但是它不直接支持播放 HLS 协议的播放. 需要借助 videojs-contrib-hls 但是我怎么测试都没成功,播放不了。大家有测试通的可以联系我。 经过一番的查找,github 上一顿搜索,黄天不负有心人,找见了这个库FZ-live 我看他也是基于 video.js 的。

    html code

    <video id="video" class="video-js vjs-default-skin" controls  preload="none" data-setup='{}'>
        <source src="./src/z.m3u8" type="application/x-mpegURL">
    </video>
    

    直接写video 标签, 在 source 的 src 给上路径就可以,还有个要求,就是资源 不能跨域,需要在同一域下。

    js code

    //切换地址播放
    var player = videojs('video');
     player.ready(function() {
         var myPlayer = this;
         myPlayer.src(url);
         myPlayer.load(url);
         myPlayer.play();
       });
    

    我们用js实现了切换地址播放。 video.js 这个插件 提供了好多api 我们有需要可以查看,可以做出好多功能

    相关文章

      网友评论

          本文标题:转]前端播放视频,流媒体,rtsp,rtmp,hls

          本文链接:https://www.haomeiwen.com/subject/kwozgftx.html