使用 video.js 显示变形 mp4 视频？答案

【问题标题】：Showing anamorphic mp4 video with video.js?使用 video.js 显示变形 mp4 视频？
【发布时间】：2014-04-16 11:09:32
【问题描述】：

我正在尝试从 DVD 创建视频剪辑并在网页上使用 video.js 播放它。

DVD 上的源素材采用变形格式，即以 720 x 576 像素存储，但应以 1024 x 576 像素显示。

我使用 Handbrake 及其“严格”变形设置创建了一个 mp4 文件。

VLC 正确显示生成的文件，即宽度被拉伸到 16:9，尽管 VLC 媒体信息正确报告了 720 x 576 像素。

当我尝试使用下面的 html 代码通过 video.js 查看它时，视频没有被拉伸 - 但假定为方形像素。

谷歌搜索并没有透露太多信息，至少在变形素材的背景下没有。有的贴子建议把宽度改成“100%”或者“auto”，或者把video标签放到一个有定义尺寸的DIV里。

但是，结果总是一样的。播放器本身的尺寸会发生变化，但显示的视频仍然“压扁”，两边都有黑条。

是否有我没有找到的选项、我忽略的编码设置，或者可以在播放器中拉伸视频宽度的 CSS 技巧？还是根本不可能？

是的，我可以在编码过程中将视频缩放为方形像素，但这似乎很浪费空间。

<html>
    <head>
        <script type="text/javascript">
                document.createElement('video');document.createElement('audio');document.createElement('track');
        </script>
        <link href="file:///home/mike/videojs-demo/video-js.css" rel="stylesheet">
        <script src="file:///home/mike/videojs-demo/video.js"></script>
        <title>video.js test</title>
    </head>
<body>
    <video id="example_video" class="video-js vjs-default-skin"
        controls 
        preload="auto"
        width="1024"
        height="576"
        data-setup='{}'>
        <source src="file:///home/mike/videojs-demo/test2.mp4" type='video/mp4' />
    </video>
 </body>
 </html>

【问题讨论】：

标签： html5-video video.js

【解决方案1】：

在视频元素上设置宽度和高度属性应该可以解决您的问题。但我看到您使用的是 video.js 并且只有一个 mp4 文件。我怀疑，如果您在 Firefox 中查看该页面，它在许多情况下不播放 mp4，那么它使用的是 Flash 后备，可能不会为您调整宽高比。

尝试使用视频的 webm 编码版本制作第二个 source 标签。这将允许 Firefox 以本机方式而不是使用 Flash 播放视频，这应该可以解决问题并让您获得更好的性能。

【讨论】：