在使用videojs播放rtmp直播流时，遇到的问题记录：
- src中的type可以不指定,若指定则不能错.hls的为mpegts流,type为’application/x-mpegURL’ rtmp的type：‘rtmp/flv’ http-flv type:‘video/flv’
- videojs.options.flash.swf = ‘./js/video-js.swf’ 指定swf位置,否则需要访问公网从cdn下载
- 动态更换播放的视频源时，需要先用dispose()销毁，再重新创建，dispose方法会连同dom一同删除，故需要创建dom （如果直接创建video元素，注意生成的object不能在video标签下面，否则页面不报错但不能播放，最好创建一个div ,将其innerHTML设为’<video id=’+id+’ classe="" …>’）
http://www.fly63.com/nav/1213
动态创建html元素：https://www.jb51.net/article/135376.htm
视频播放插件 Video.js https://www.jianshu.com/p/9414886a8963
<!DOCTYPE html>
<html>
<head>
<title>vod</title>
<!-- 导入的videojs是7.0版本以上的，集成VHS协议库，可播放HLS流媒体视频 -->
<link href="./js/video-js.min.css" rel="stylesheet" type="text/css">
<script src="./js/video.min.js"></script>
<!-- 引入的videojs-flash.js插件主要是为播放rtmp视频流-->
<script src="./js/videojs-flash.min.js"></script>
<!-- 引入的flv.js插件主要flv转为h5-->
<script src="./js/flv.min.js"></script>
<style>
.top {
width: 100%;
height: 300px;
margin: 0;
}
.left {
width: 50%;
height: 300px;
float: left;
}
.right {
float: left;
width: 50%;
height: 300px;
}
.buttom {
position: relative;
top: 50px;
width: 100%;
height: 300px;
}
.foot {
position: relative;
top: 150px;
width: 100%;
height: auto;
}
</style>
<style>
.controls {
display: block;
width: 100%;
text-align: left;
position: relative;
top: 10px;
}
</style>
<script>
var h5url='http://192.168.0.101/live/channel1.flv';
<!-- RTMP直播源地址-->
var rtmpurl='rtmp://192.168.0.101:1935/live/channel1';
<!-- http-flv直播源地址-->
var flvurl="http://192.168.0.101/live/channel1.flv";
<!-- hls直播源地址-->
var hlsurl="http://192.168.0.101/live/channel1.m3u8";
</script>
</head>
<body>
<div id='top' class="top">
<div id='tl' class="left">
<p id='tlp' align="center">rtmp</p>
<video id='rtmp' width="600" height="300"
class="video-js vjs-default-skin vjs-big-play-centered" controls
preload="none">
</video>
</div>
<div id='tr' class="right">
<p id='trp' align="center">hls</p>
<video id='hls' width="600" height="300"
class="video-js vjs-default-skin vjs-big-play-centered" controls
preload="none">
</video>
</div>
</div>
<div id='buttom' class="buttom">
<div id='bl' class="left">
<p id='blp' align="center">h5</p>
<video id="h5_flv" width="600" height="300" controls preload="none"></video>
</div>
<div id='br' class="right">
<p id='brp' align="center">http-flv</p>
<video id='flv' width="600" height="300"
class="video-js vjs-default-skin vjs-big-play-centered" controls
preload="none">
<source src="http://192.168.0.101/live/test.flv">
</video>
</div>
</div>
<div id='foot' class='foot'>
<input id="text" type="text" placeholder="channel name" style="width:30%"
title="播放的视频通道名称" />
<button id='seturl' onclick="changurl()" title="更换播放的视频地址">更换视频源</button>
<select id="select" title='更换指定窗口的视频源'>
<option value="all">all</option>
<option value="h5">h5</option>
<option value="rtmp">rtmp</option>
<option value="flv">flv</option>
<option value="hls">hls</option>
</select>
</div>
</body>
<script>
function createdom(fid,id){
var newVideo = document.createElement("div");//创建一个标签
newVideo.innerHTML = '<video id='+ id +' width="600" height="300" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="none"></video>';
var Fid = document.getElementById(fid);//通过id号获取newVideo的父节点（也就是上一级的节点）
Fid.appendChild(newVideo);//把创建的节点newVideo添加到父节点中；
}
function h5_play(videourl){
var player;
var element= document.getElementById('h5_flv');
if (flvjs.isSupported()) {
player = flvjs.createPlayer({
type: 'flv',
isLive: true,
url: videourl
});
player.attachMediaElement(element);
player.load(); //加载
//player.play();
}
return player;
}
var player_h5;
var player_rtmp;
var player_flv;
var player_hls;
function playh5(){
player_h5=h5_play(h5url);
player_h5.play();
}
function h5_destroy(player) {
player.pause();
player.unload();
player.detachMediaElement();
player.destroy();
player = null;
}
videojs.options.flash.swf = './js/video-js.swf'; //指定swf播放器的路径,不指定默认从cdn下载
function playrtmp(id){
player_rtmp = videojs(id,{
sources: [{
src: rtmpurl,
type: 'rtmp/flv'
}]
},
function(){console.log('rtmp播放器初始化成功')})
player_rtmp.play();
}
function playflv(id){
//var player_flv = videojs('flv', {}, function(){console.log('flv播放器初始化成功')})
player_flv = videojs(id, {
sources: [{
src: flvurl,
type: 'video/flv'
}]
},
function(){this.load();console.log('flv播放器初始化成功')})
player_flv.play();
}
function playhls(id){
player_hls = videojs(id,{
sources: [{
src: hlsurl,
type: 'application/x-mpegURL' //可以不指定type,如果指定则类型不能错(hls为mpegts流)
}]
},
function(){console.log('hls播放器初始化成功')})
player_hls.play();
}
function playAll(){
playh5();
playrtmp('rtmp');
playflv('flv');
playhls('hls');
}
function changurl(){
var channel=document.getElementById('text').value;
var myselect=document.getElementById("select");
var index=myselect.selectedIndex;
var value=myselect.options[index].value;
if(value==="all"){
rtmpurl="rtmp://192.168.0.101:1935/live/"+channel;
flvurl="http://192.168.0.101/live/"+channel+".flv";
h5url="http://192.168.0.101/live/"+channel+".flv";
hlsurl="http://192.168.0.101/live/"+channel+".m3u8";
player_rtmp.dispose();
player_hls.dispose();
player_flv.dispose();
createdom('tl','rtmp');
createdom('tr','hls');
createdom('br','flv');
h5_destroy(player_h5);
playAll();
}else if(value==="h5"){
h5url="http://192.168.0.101/live/"+channel+".flv";
h5_destroy(player_h5);
playh5();
}else if(value==="rtmp"){
rtmpurl="rtmp://192.168.0.101:1935/live/"+channel;
player_rtmp.dispose();
createdom('tl','rtmp');
playrtmp('rtmp');
}else if(value==="flv"){
flvurl="http://192.168.0.101/live/"+channel+".flv";
player_flv.dispose();
createdom('br','flv');
playflv('flv');
}
else if(value==="hls"){
hlsurl="http://192.168.0.101/live/"+channel+".m3u8";
player_hls.dispose();
createdom('tr','hls');
playhls('hls');
}else{
console.log(channel+":"+value);
}
console.log("h5url:"+h5url);
console.log("rtmpurl:"+rtmpurl);
console.log("flvurl:"+flvurl);
console.log("hlsurl:"+hlsurl);
}
</script>
<script type="text/javascript">
window.onload = playAll();
</script>
</html>