Question

我正在尝试在HTML5网页中加入使用CamStudio的截屏视频。它适用于Firefox和Opera（最新版本测试），但不适用于IE11，也不适用于Chrome，至少在我的机器上。

这是我的代码：

<!DOCTYPE html>
<html>
<head>
<title>Hello world</title>
<meta charset="utf-8">
</head>

<body>

<video autoplay="autoplay" loop="loop">
    <source src="helloworld.mp4" type="video/mp4">
    <source src="helloworld.webm" type="video/webm">
    <source src="helloworld.ogv" type="video/ogg">
</video>

</body>

</html>

此HTML列表符合标准。 Here is the full, published test case

欢迎您通过从服务器下载视频来检查视频，以评估视频是否编码正确;然而，这是我编码的方式：

ffmpeg -i helloworld.avi helloworld.mp4
ffmpeg -i helloworld.avi helloworld.webm
ffmpeg -i helloworld.avi helloworld.ogv

如果您需要原始helloworld.avi，here it is。我从here获得了ffmpeg。

我相信服务器会以适当的Content-Type回复，欢迎您自行验证。

我做错了什么？

我请请你不要给我一般性的答案，如果可能的话，但是要讨论实际的测试用例：我试图为你提供所需的一切，你可以要求更多的信息

Answer 1

你的HTML很好。视频分辨率（471x390）对大多数编解码器都不适用。如果使用-strict，ffmpeg会对此产生错误。我对视频进行了重新编码，它现在适用于我，我裁剪了一个像素，以获得一个可分割的版本（裁剪滤镜）：

ffmpeg -i helloworld.avi  -filter:v "crop=470:390:0:0" -c:v libvpx -crf 6 -b:v 3M -qmin 2 -qmax 42 -quality best -cpu-used 0  helloworld.webm

ffmpeg -i helloworld.avi -filter:v "crop=470:390:0:0" -c:v libx264 -profile:v high -level 4.1 -strict -2 -pix_fmt yuv420p -crf 12 -subq 9 helloworld.mp4

我从我经常用于编码html视频的脚本中获取的其他参数。特别是iOS最终对编码选项不屑一顾。

Answer 2

您可以使用其他浏览。或试试这个

    <!DOCTYPE html>
<html>
<head>
<title>Hello world</title>
</head>

<body>

<video autoplay="autoplay" loop="loop">
    <source src="helloworld.mp4" type="video/mp4">
    <source src="helloworld.webm" type="video/webm">
    <source src="helloworld.ogv" type="video/ogg">
</video>

</body>

</html>

HTML5视频无法在Chrome和IE11中播放（提供详尽的测试用例）

2 个答案: