一、使用<embed>标签
<div id="divPlay" Style="display:none;"></div>
document.getElementById("divPlay").style.display = "inline";
var str = "<embed id="embedFile" src="+fileURL+" width="100%" height="500px">"; $("#divPlay").html(str);
document.getElementById("embedFile").stop();//关闭视频
注意:如果<embed>直接放在div,直接动态赋值document.getElementById("embedFile").src = fileURL,视频无法播放,只好在JS动态添加
<embed>在不同浏览器调用的播放器不同,暂停、关闭视频的方法可能不同
二、VLC插件页面播放器
1、安装VLC
2、
IE
<div id="vlc_div" style="100%;height:95%;"> <object id="vlc" type='application/x-vlc-plugin' events='True' classid='clsid:9BE31822-FDAD-461B-AD51-BE1D1C159921' codebase="http://downloads.videolan.org/pub/videolan/vlc/latest/win32/axvlc.cab"> <param id='mrlParam' name='mrl' value='http://127.0.0.1:1002/uploadfiles/conffile/6142fb24-7bde-442c-b83e-cb44c8943862/1234.mp4' /> <param name='volume' value='50' /> <param name='autoplay' value='true' /> <param name='loop' value='false' /> <param name='fullscreen' value='false' /> </object> </div>
非IE
<!--[if !IE]><!--> <object type='application/x-vlc-plugin' id='vlc' events='True' width="720" height="540" pluginspage="http://www.videolan.org" codebase="http://downloads.videolan.org/pub/videolan/vlc-webplugins/2.0.6/npapi-vlc-2.0.6.tar.xz"> <param name='mrl' value='rtsp://218.204.223.237:554/live/1/66251FC11353191F/e7ooqwcfbqjoo80j.sdp' /> <param name='volume' value='50' /> <param name='autoplay' value='true' /> <param name='loop' value='false' /> <param name='fullscreen' value='false' /> </object> <!--<![endif]-->
例
<div class="videoCont" id = "videoCont" > <!-- 播放器 --> <object type='application/x-vlc-plugin' id='vlc' events='True' classid='clsid:9BE31822-FDAD-461B-AD51-BE1D1C159921' codebase="http://downloads.videolan.org/pub/videolan/vlc/latest/win32/axvlc.cab" width="1000" height="620"> <param name='mrl' value='' /> <param name='volume' value='50' /> <param name='autoplay' value='true' /> <param name='loop' value='false' /> <param name='fullscreen' value='true' /> </object> </div>
if(bookurl != null && bookurl != ''){ if(isValid(bookurl)){ //vlc播放器 $('.magazine,.singCont,.startSing,.zoom,.repeal,.previous-button,.next-button,.topicTitle,.paginationBox').hide(); $('.videoCont').show(); var height = document.body.clientHeight ; height -= 1; setTimeout(function(){ //延时播放,解决初始化时播放器不显示的问题 var vlc=document.getElementById("vlc"); var id=vlc.playlist.add(bookurl); vlc.playlist.playItem(id); },1000); } }
三、jwplayer插件播放
<div class="video" style=" 100%;height: 100%;"> <div id='obj' class='col-xs-12 no-padding'></div> </div>
<script type="text/javascript" src="${ctx }/resources/mediaplayer/jwplayer.js"></script>
function Play(file, second) { var plist = []; //var _file = file.substr(file.indexOf(theFileManager) + theFileManager.length); //_file = _file.replace(/\/g, "/"); file = file.substr(0, file.indexOf('.mp4')); var file_ = "mp4|" + file.replace(/\/g, "/");//"mp4,|" + file.replace(/\/g, "/"); var _player = jwplayer("mediaplayer").setup({ "flashplayer": '@Url.Content("~/html/mediaplayer/awDIY.swf")',//'@Url.Content("~/Scripts/TopicDetail/awDIY.swf")', "volume": "100", "bufferLength": "0.1", "stretching": "exactfit", //"autostart": "true", "skin": '@Url.Content("~/html/mediaplayer/skin/modieus.zip")',//'@Url.Content("~/Scripts/TopicDetail/skin/modieus.zip")', "width": $('#playerdiv').width(), "height": 213, "file": file_,//vod + _file, 'streamer': streamer }); if (_player.getState() != 'PLAYING') {//若当前未播放,先启动播放器 _player.play();//play和autostart不能同时使用 setTimeout(function () { _player.seek(second); }, 500); } else { _player.seek(second); } }