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

Question

可能吗？

我知道这是完全不同的事情，但是使用 jw 媒体播放器，您可以选择拉伸视频以填充 div。只是 html5 对这些事情嗤之以鼻？

谢谢，

Answer 1

根据上面的答案，以下对我有用：

// Get video container width and height
var w = $('#video').parent().width();
var h = $('#video').parent().height();
$('#video')
    .attr('width', w)
    .attr('height', h)
    .delay( 500 )  // don't know why, but without this sometimes it doesn't work.
    .mediaelementplayer({
        defaultVideoWidth: w
        , defaultVideoHeight: h
        , videoWidth: -1
        , videoHeight: -1
        , enableAutosize: true
    });

Answer 2

尝试设置以下

<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>

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

然后，您可能必须使用类似的东西设置元素

 $(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: []

        });
  });