HTML5 视频源属性答案

【问题标题】：HTML5 Video Source PropertiesHTML5 视频源属性
【发布时间】：2013-09-25 22:07:20
【问题描述】：

所以我有这个结构：

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

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

这可能吗？怎么样？

【问题讨论】：

stackoverflow.com/questions/4129102/html5-video-dimensions

标签： javascript html html5-video

【解决方案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：这些属性返回视频的固有尺寸，如果尺寸未知，则返回零。

【讨论】：

【解决方案2】：

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

例子

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

希望对你有帮助

【讨论】：