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进行二次开发了。
网友评论