Question

我在一个部门有一个HTML视频。当用户更改HTML窗口的大小时，视频的播放区域会发生变化，以保持其宽高比，从而在视频周围留下边框（取决于窗口的大小调整方式）。

是否有办法获得分区内视频的实际播放区域的尺寸（而非分割本身）。

我试过了：

console.log($("#video").css("height"));

其中#video是视频本身的ID，但它似乎返回分区高度，而不是视频播放区域。

这需要在窗口调整大小事件处理程序中发生：

    $( window ).resize(function() {
    //Detect playback window size
    }

Answer 1

我的解决方案是获取原始视频大小（请参阅HTML5 Video Dimensions），然后根据原始宽高比计算高度和宽度。如该页面所述，问题是这些维度仅在加载元数据后检索（在我的测试页面中仅在播放视频后才发生）。使视频加载元数据的方法是使用视频标记上的 preload =“metadata”属性。

其余的只是结合这些：

var aspectratio=1;
resizeHandler();
$("video").on('loadedmetadata',function() {
	var width = this.videoWidth;
	var height = this.videoHeight;
	aspectratio=width/height;
	resizeHandler();
});

function dis(v) { return Math.round(v*100)/100; }

function resizeHandler() {
	var height=$('video').height();
	var width=$('video').width();
	var actualHeight=Math.min(height,width/aspectratio);
	var actualWidth=Math.min(width,height*aspectratio);
    $('#spnInfo').text('ratio: '+dis(aspectratio)+'  width: '+dis(width)+', height:'+dis(height)+'  ,actual width: '+dis(actualWidth)+', actual height:'+dis(actualHeight));
}

$(window).resize(resizeHandler);

$('#btnResize').click(function() {
  $('video').css({height:Math.random()*600+50,width:Math.random()*600+50});
  $(window).trigger('resize');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="button" id="btnResize" value="Resize" /><span id="spnInfo"></span><br/>
<video poster="http://corrupt-system.de/assets/media/sintel/sintel-trailer.jpg" controls=""
	preload="metadata" style="width:200px; height:500px">
	<source src="http://corrupt-system.de/assets/media/sintel/sintel-trailer.m4v" type="video/mp4">
    <source src="http://corrupt-system.de/assets/media/sintel/sintel-trailer.webm" type="video/webm">
</video>

在播放过程中获取HTML5视频的尺寸（播放区域 - 而非分割）

1 个答案: