美文网首页
videojs 流媒体播放rtmp协议

videojs 流媒体播放rtmp协议

作者: sxqiong | 来源:发表于2017-12-16 12:56 被阅读386次

    rtmp协议需要flash的支持,html5不支持也无法支持这一协议。

    • 搭建rtmp流媒体服务器可参考crtmpserver(如果不会,私信我给你文档)

    接下来就是使用videojs

    • videojs 默认是使用html5播放器可以通过添加 data-setup='{ "techOrder": ["flash"] }' 将flash设为首选。
      那么你的代码就是这样的(请自行引入需要的js)
    <!DOCTYPE html>
    <html>
    <head>
      <meta charset=utf-8 />
      <link href="video.js/dist/video-js/video-js.css" rel="stylesheet">
      <script src="video.js/dist/video-js/video.js"></script>
      <script>
        videojs.options.flash.swf = "video.js/dist/video-js/video-js.swf"
      </script>
    
    </head>
    <body>
    <video id="my_video_1" class="video-js vjs-default-skin" controls preload="auto" width="640" height="268"
           data-setup='{ "techOrder": ["flash"] }'>
      <source src="rtmp://172.17.20.104:1935/flvplayback/mp4:C201711040/C201711040_15133319919941212.mp4" type='rtmp/mp4'>
    </video>
    
    </body>
    </html>
    

    接下来才是重点!!!google报错 一直报错

    video.dev.js:1460 VIDEOJS: ERROR: (CODE:4 MEDIA_ERR_SRC_NOT_SUPPORTED) No compatible source was found for this video
    

    千万的教程翻遍还是在报错,于是我决定转行,也许我当个医生、小品演员更好,在我怀疑人生之际我发现network里并没有请求video-js.swf静态文件,为什么,为什么!!!
    后来我试着用万恶的IE,这次!它竟然成功的播放了!!!WTF?冷静下来我才tm意识到,Google已经默认禁掉了flash。把它打开!!!好了,可以对videojs进行二次开发了。

    总结: 如果只是初期技术选型,那可以考虑其他流媒体协议(我觉得DASH就不错),毕竟flash已经功成身退,rtmp也该退隐江湖。

    相关文章

      网友评论

          本文标题:videojs 流媒体播放rtmp协议

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