<!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、还播放不了 确认是否是 直播源有问题!