在使用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>
