css - 使用videojs保持youtube视频的纵横比

Question

我正在使用 html5 视频标签播放 youtube 视频。我面临纵横比的问题。我无法从 YouTube 视频中删除黑边。

> <video id="vjs-youtube" height="385" width="710" class="video-js
> vjs-default-skin" preload="auto" poster=""  x-webkit-airplay="allow"
> data-setup='{"techOrder":"youtube","html5"],"ytcontrols":false}'>
> <source src="http://www.youtube.com/watch?v=4BS-PEEAgNk"
> type="video/youtube"></source> </video>

感谢任何建议，

Answer 1

试试这个，

HTML

 <video id="discovery" src="discovery.mp4"></video>

JavaScript

  var videoelement = document.getElementById("discovery");
  videoelement.videoHeight; // returns the intrinsic height of the video
  videoelement.videoWidth; // returns the intrinsic width of the video

来源(HTML5 规范):http://www.w3.org/TR/html5/video.html#video

然后您可以通过将宽度除以高度来计算纵横比。

希望对您有所帮助。