Mediaelement.js寬高比2.35

當使用Yootheme的widgetkit（使用Mediaelement.js）的媒體播放器時，我注意到該腳本基於海報幀的寬度來計算視頻播放器的高度。Mediaelement.js寬高比2.35

我已經將海報幀的寬度設置爲940px，Mediaelement.js將高度設置爲528px。如果視頻和海報圖像的寬高比爲16：9，通常情況下可以。不過，我在2.35工作。

由於具有響應模板，我無法設置包含視頻的div的高度，因爲這會在平板電腦/手機上查看時影響模板。

是否可以更改Mediaelement.js中的計算以反映縱橫比？

來源

2013-01-10 user1967254

注意到，這只是發生在FF。是否有修復FF？ – user1967254

我不是在這個太過描述，但如果你初始化爲JS（不是jQuery的方法），那麼你可以使用MEJS所提供的方法：

setVideoSize，設置視頻的大小。 setPlayerSize設置播放器大小。

meVideo.media.setVideoSize(screen.width , screen.height); 
meVideo.setPlayerSize(screen.width , screen.height);

JS：

meVideo = new MediaElementPlayer('#mediaElement',{ 
      defaultVideoWidth: '100%', 
      defaultVideoHeight: '100%', 
      videoWidth: '100%', 
      videoHeight: '100%', 
      loop: false, 
      enableAutosize: true, 
      features: ['playpause','progress','current','duration','tracks','volume'], 
      success: function(media, node, player) { 
       var events = ['loadstart', 'play','pause', 'ended', 'loadeddata', 'loadedmetadata', 'progress', 'canplay']; 
       for(var i=0, il=events.length; i<il; i++){ 
        var eventName = events[i]; 
        media.addEventListener(events[i], function(e) { 
         console.log(eventName); 
        }); 
       }; 

      }, 
      error: function() { 
       console.log('Error Loading Video'); 
      } 
     });

HTML：

<video id="mediaElement" poster="{{image.src}}" controls="controls" preload="auto"> 
       <!-- MP4 source must come first for iOS --> 
       <source type="video/mp4" src="{{mp4_url}}" /> 
       <!-- WebM for Firefox 4 and Opera --> 
       <source type="video/webm" src="{{webm_url}}" /> 
       <!-- OGG for Firefox 3 --> 
       <source type="video/ogg" src="{{ogg_url}}" /> 
       <source type="video/flv" src="{{flv_url}}" /> 
       <!-- Fallback flash player for no-HTML5 browsers with JavaScript turned off --> 
       <object scale="noborder" allowFullScreen="false" type="application/x-shockwave-flash" data="{{ STATIC_URL }}js_scss/libs/mediaelement/flashmediaelement.swf">  
        <param name="movie" value="{{ STATIC_URL }}js_scss/libs/mediaelement/flashmediaelement.swf" /> 
        <param name="flashvars" value="controls=true&poster={{image.src}}&file={{flv_url}}" />  
        <!-- Image fall back for non-HTML5 browser with JavaScript turned off and no Flash player installed --> 
        <img src="{{image.src}}" alt="{{image.credit}}" title="No video playback capabilities" /> 
       </object> 
     </video>

來源

2013-05-21 19:43:52

Mediaelement.js寬高比2.35

回答

相關問題