項目中要用到rtmp直播和點播。要求:點播能夠調整播放進度
開始用騰訊提供的播放器,老卡,畫質差,很多時候播不出來,rtmp點播還不能快進。

后來用Wowza自帶的flash rtmp播放器,有源碼

嘗試修改源碼,發現他的前端js和后端flash都沒有交互,沒寫過as,風險大,又太耗時,果斷pass。。。

jwplayer rtmp播放好像也是要商業授權,最后選用了video.js
下載地址:https://github.com/videojs/video.js/releases
發現 V6.X.X的都播不了rtmp,V5.x.x的才行,對比發現,V6.X.X目錄下沒有video-js.swf,rtmp需要flash來播吧。V6可能是緊跟潮流,把flash給kill了,adobe flash是牆倒眾人推哈。。。
查了下,還真是:http://blog.videojs.com/Video-js-removes-Flash-from-core-player/
<!DOCTYPE html> <html lang="en"> <head> <title>Video.js | HTML5 Video Player</title> <!-- <link href="video-js-6.2.0/video-js.css" rel="stylesheet"> <script src="video-js-6.2.0/videojs-ie8.min.js"></script> --> <link href="http://vjs.zencdn.net/5.20.1/video-js.css" rel="stylesheet"> <script src="http://vjs.zencdn.net/5.20.1/videojs-ie8.min.js"></script> </head> <body> <video id="example_video_1" class="video-js vjs-default-skin" controls preload="auto" width="1280" height="720" poster="http://vjs.zencdn.net/v/oceans.png" data-setup="{}"> <!-- <source src="1.mp4" type="video/mp4"> --> <source src="rtmp://192.168.1.12:1935/live/720.stream" type="rtmp/flv"> <p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p> </video> <script src="http://vjs.zencdn.net/5.20.1/video.js"></script> </body> </html>
但是問題來了,我用手機推個流:豎放,沒問題。

當我把手機橫放以后。。。畫面沒轉。。。變形了。。。

找解決方法中。后面再來更新。。。
------------------------------------------------------------------------------------2017-11-14更新
最終采用的video.js方法播放rtmp和hls方法,保證電腦和手機端都能看。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Video.js | HTML5 Video Player</title>
<meta http-equiv=Content-Type content="text/html;charset=utf-8">
<script src="video-js-6.2.0/videojs-ie8.min.js"></script> -->
<link href="video-js-5.20.1/video-js.css" rel="stylesheet">
<script src="video-js-5.20.1/ie8/videojs-ie8.min.js"></script>
</head>
<body style="margin:0px;">
<video id="yxm_video" class="video-js vjs-default-skin vjs-big-play-centered" >
<p class="vjs-no-js">您的瀏覽器不支持H5或FLASH</p>
</video>
<script src="video-js-5.20.1/video.vod.js"></script>
<script>
var player = videojs('yxm_video',{
//width: <?php if(is_array($_GET) && count($_GET)>0 && isset($_GET['width']) ){ echo $_GET['width'];} else {echo 1280;} ?>,
//height: <?php if(is_array($_GET) && count($_GET)>0 && isset($_GET['height']) ){ echo $_GET['height'];} else {echo 720;} ?>,
width:980,
height:550,
controls:true,
preload:"true", //預加載:string;'auto'|'true'|'metadata'|'none'
//poster:'source/suoluetu.jpg',//預覽圖:string
autoplay:<?php if(is_array($_GET) && count($_GET)>0 && isset($_GET['auto'])){ echo 'true';} else {echo 'false';} ?>,
loop:<?php if(is_array($_GET) && count($_GET)>0 && isset($_GET['loop'])){ echo 'true';} else {echo 'false';} ?>,
muted:false, //靜音
sources:[
{
//src:'source/test.mp4',
//type:'video/mp4'
//src:'rtmp://192.168.2.24:1935/live/720yzc.stream',
<?php
if(is_array($_GET) && count($_GET)>0 && isset($_GET["rtmp"])){
?>
src:'<?php echo urldecode($_GET["rtmp"]); ?>',
<?php
} else {
?>
// 默認地址
src:'',
<?php
}
?>
// 默認視頻類型
type:'rtmp/flv'
},
{
<?php
if(is_array($_GET) && count($_GET)>0 && isset($_GET["hls"])){
?>
src:'<?php echo urldecode($_GET["hls"]); ?>',
<?php
} else {
?>
// 默認地址
src:'',
<?php
}
?>
// 默認視頻類型
type:'application/x-mpegURL'
}
],
controlBar: {
muteToggle: false, //靜音按鈕
volumeMenuButton: false, // 音量調節
<?php if(is_array($_GET) && count($_GET)>0 && isset($_GET['live'])){ echo 'progressControl: false';} ?>
}
},function onPlayerReady(){
});
</script>
</body>
</html>
------------------------------------------------------當我把手機橫放以后。。。畫面沒轉。。。變形了。。。的問題的解決方案---2017-11-14更新--------------------------
后來發現百度改版的video.js player可以自適應畫面,下載地址:
http://cyberplayer.bcelive.com/demo/new/index.html
只是比較蛋疼的是要注冊一個百度的accessKey。。。難道用戶量上來要收費???
