Question

有可能吗？

我知道这是一个不同的东西，但是使用jw媒体播放器你可以选择拉伸视频来填充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: []

        });
  });

Answer 2

基于上面的答案，以下答案对我有用：

// 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
    });

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

2 个答案: