Mediaelement.js纵横比2.35

Question

在使用来自Yootheme的widgetkit的媒体播放器时，我注意到该脚本根据海报框的宽度计算视频播放器的高度。

我将海报框的宽度设置为940px，Mediaelement.js将高度设置为528px。这通常是可以的，如果视频和海报图像的纵横比是16:9。然而，我在2.35工作。

由于有一个响应式模板，我无法设置包含视频的div的高度，因为当在平板电脑/手机上观看时，这会影响模板。

是否可以更改Mediaelement.js中的计算以反映纵横比？

Answer 1

我在这里不做过多的描述，但是如果你初始化为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>