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);
                }
            }
  • 相关阅读:
    SAP PI 如何实现消息定义查询
    EWM与ERP交互程序
    ITS Mobile Template interpretation failed. Template does not exist
    SAP Material Flow System (MFS) 物料流系统简介
    SAP EWM Table list
    EWM RF 屏幕增强
    SAP EWM TCODE list
    SAP扩展仓库管理(SAPEWM)在线研讨会笔记
    ERP与EWM集成配置ERP端组织架构(二)
    EWM RF(Radio Frequency)简介
  • 原文地址:https://www.cnblogs.com/lijianda/p/9842299.html
Copyright © 2011-2022 走看看