zoukankan      html  css  js  c++  java
  • 页面播放视频

    一、使用<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);
                }
            }
  • 相关阅读:
    学过C#之后,对javascript数组容易犯的错误
    关于最优种植区评价问题
    JavaScript全局变量与局部变量
    ArcGIS API for Javascript 图层切换渐变效果实现
    Motan在服务provider端用于处理request的线程池
    转:Log4j 日志体系结构
    zookeeper的开机自启动
    maven的多模块项目搭建
    scala中json与对象的转换
    社区帖子全文搜索实战(基于ElasticSearch)
  • 原文地址:https://www.cnblogs.com/lijianda/p/9842299.html
Copyright © 2011-2022 走看看