页面播放视频

一、使用<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);
            }
        }
原文地址:https://www.cnblogs.com/lijianda/p/9842299.html