Question

所以我有这个结构：

<div style="width: 700px; height: 400px;">
   <video style="width: 100%; height: 100%">
</div>

我需要知道，在加载视频后，我如何才能找到视频的原始尺寸，或者至少是宽高比，视频持续时间等。

这可能吗？如何？

Answer 1

你走了 - 我猜属性名称不言自明：

var video = document.getElementById('video');
console.log(video.duration);
console.log(video.videoHeight);
console.log(video.videoWidth);

宽高比可以通过宽度和高度来计算。

来自w3.org: 4.8.6 The video element：

video.videoWidth / video.videoHeight：这些属性返回视频的内在尺寸，如果尺寸未知则返回零。

Answer 2

在视频代码中，只需添加属性控件即可显示deails

实施例

<div style="width: 700px; height: 400px;">
    <video style="width: 100%; height: 100%" controls>
        <source src="movie.mp4" type="video/mp4"/>
    </video>
</div>

希望这有帮助

HTML5视频源属性

2 个答案: