页面播放视频

一、使用<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动态添加

二、VLC插件页面播放器

1、安装VLC

2、

<div id="vlc_div" style="width: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="width: 100%;height: 100%;">
      <div id=\'obj\' class=\'col-xs-12 no-padding\'></div>
</div>

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);
            }
        }

秒客网

页面播放视频

相关文章