1

当使用 Yootheme 的 widgetkit 中的媒体播放器（使用 Mediaelement.js）时，我注意到该脚本根据海报框架的宽度计算视频播放器的高度。

我已将海报框架的宽度设置为 940 像素，Mediaelement.js 将高度添加为 528 像素。如果视频和海报图像的纵横比是 16:9，那通常是可以的。但是，我在 2.35 工作。

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

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

4

1 回答 1

0

我在这方面并没有过多的描述，但是如果您以 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-21T19:43:52.807 回答