javascript - HTML5 Video Source Properties

Question

So I have this structure:

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

I need to know, after the video is loaded, how can i find out the original dimensions of the video, or at least the aspect ratio, the video duration, etc.

Is this possible? how?

Answer 1

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

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

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

来自w3.org：4.8.6 视频元素：

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

Answer 2

在视频标签中，只需添加属性控件即可显示问题

例子

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

希望这可以帮助