可能吗?
我知道这是完全不同的事情,但是使用 jw 媒体播放器,您可以选择拉伸(stretch)视频以填充 div。难道只是 html5 对这些事情不屑一顾吗?
谢谢
最佳答案
尝试设置以下内容
<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: []
});
});
关于mediaelement.js - 使用 MediaElement.js 拉伸(stretch)视频以填充 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11320546/