Question

我正在尝试从DVD创建视频片段，并在网页上播放video.js。

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

我使用Handbrake创建了一个带有'严格'变形设置的mp4文件。

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

当我尝试使用下面的html代码使用video.js查看时，视频未被拉伸 - 但假设为正方形像素。

谷歌搜索没有透露太多，至少不是在变形材料的背景下。有些帖子建议将宽度更改为“100％”或“自动”，或将视频标记放入具有明确尺寸的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>

Answer 1

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

尝试使用webm编码版本的视频制作第二个source标记。这将允许Firefox本地播放视频而不是Flash，这应该可以解决问题，并且无论如何都会让你获得更好的性能。

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

1 个答案: