【随手记录】vedio标签展示rtmp协议视频流

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>videojs</title>
    <link href="http://vjs.zencdn.net/5.5.3/video-js.css" rel="stylesheet">
    <script src="http://vjs.zencdn.net/5.5.3/video.js"></script>
</head>
<body>
    <video id="myvideo" class="video-js" controls preload="auto" width="640" height="500"
            poster="http://live-snapshot.test.com/PiliSDKTest/streamkey.jpg" data-setup="{}">
        <source src="rtmp://视频流地址" type='rtmp/vlc'>
        <p class="vjs-no-js">
            To view this video please enable JavaScript, and consider upgrading to a web browser that
            <a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
        </p>
  </video>
    
    <script>
        var myvideo=videojs("myvideo");
        myvideo.on("ended",function(){
            console.log("视频播放结束");
        })
        myvideo.on("pause",function(){
            console.log("点击暂停");
        })
        myvideo.on("play",function(){
            console.log("点击播放");
        })
        myvideo.on("volumechange",function(){
            console.log("声音改变");
        })
        myvideo.on("timeupdate",function(){
            console.log("视频播放中");
        })
        myvideo.on("seeked",function(){
            console.log("视频跳转结束");
        })
        myvideo.on("seeking",function(){
            console.log("视频跳转中");
        })
    </script>
</body>
</html>

近期项目上要跟电信对接,展示电信提供的监控点的视频,对方提供的是rtmp协议的流数据,采用vedio标签,引入video.js即可浏览,

如果遇见报错

videojs播放rtmp流提示 No compatible source was found for this video

有几个点需要注意:

1、vediojs版本降到 5
2、放到 tomcat、nginx等容器发布不要直接访问html
3、打开浏览器flash限制允许flash插件!
4、video 大小配置 preload="auto" width="640" height="500"
5、还播放不了确认是否是直播源有问题!