mediaelement.js - 使用 MediaElement.js 拉伸(stretch)视频以填充 div

Question

可能吗？

我知道这是完全不同的事情，但是使用 jw 媒体播放器，您可以选择拉伸(stretch)视频以填充 div。难道只是 html5 对这些事情不屑一顾吗？

谢谢

Answer 1

尝试设置以下内容

<div id="mediaContent">
                    <video id="mediaPlayer"  width="100%" height="100%">
                        <source type="video/mp4" src="http://clips.vorwaerts-gmbh.debig_buck_bunny.mp4" /> 

                    </video>
                </div>

然后在 CSS 中将容器 div mediaContent 设置为您想要的大小。然后视频将根据容器调整大小。严格来说，宽度和高度应该是绝对像素尺寸，但设置为 % 可以。

然后您可能需要使用类似的内容设置元素

 $(document).ready(function () {

        var myPlayer = $('#mediaPlayer');  

        var w = parseInt($('#mediaContent').css('width'));
        var h = parseInt($('#mediaContent').css('height')) ;

        myPlayer.mediaelementplayer({
            // if the <video width> is not specified, this is the default
            defaultVideoWidth: w ,
            // if the <video height> is not specified, this is the default
            defaultVideoHeight: h,
            // if set, overrides <video width>
            videoWidth: -1,
            // if set, overrides <video height>
            videoHeight: -1,
            // width of audio player
            audioWidth: 400,
            // height of audio player
            audioHeight: 30,
            // initial volume when the player starts
            startVolume: 0.8,
            // useful for <audio> player loops
            loop: false,
            // enables Flash and Silverlight to resize to content size
            enableAutosize: true,
            // the order of controls you want on the control bar (and other plugins below)
            features: ['playpause', 'progress', 'current', 'duration', 'tracks', 'volume', 'fullscreen'],
            // Hide controls when playing and mouse is not over the video
            alwaysShowControls: false,

            // forces the hour marker (##:00:00)
            alwaysShowHours: false,
            // show framecount in timecode (##:00:00:00)
            showTimecodeFrameCount: false,
            // used when showTimecodeFrameCount is set to true
            framesPerSecond: 25,
            // turns keyboard support on and off for this instance
            enableKeyboard: true,
            // when this player starts, it will pause other players
            pauseOtherPlayers: true,
            // array of keyboard commands
            keyActions: []

        });
  });