视频标签播放音频但不播放视频

Question

如果您查看我的网页，您会发现顶部的视频（红鼻子中世纪人）的音频和视频都播放得很完美。 但是，如果您查看底部（第二个）视频，当您播放它时，只有音频。您看到的“视频图像”实际上不是视频本身，而是使用“poster”html标签的png。 以下是两个视频的html代码：

<video src="http://shapeshed.com/examples/HTML5-video-element/video/320x240.m4v" poster="http://shapeshed.com/examples/HTML5-video-element/images/posters/les.jpg" controls="true" width="320" height="240">
        Your browser doesn't support the video tag. You can <a href="/video/your_video.ogg">download the video here.</a>
</video>

<video src="videos/Play.mov" poster="videos/Play.png" controls="true" width="800" height="600">
        Your browser doesn't support the video tag. You can <a href="videos/Play.mov">download the video here.</a>
</video>

我关心的是第二个视频，但在Chrome中无法播放视频，只有音频。但在Mac Safari上，视频可以正常工作。我做错了什么吗？似乎我正在按照第一个视频的方式实现第二个视频。为什么第一个能工作而第二个不能？

编辑：我取得了进展，但现在在iPad上（Chrome可以工作，iPhone可以工作），我可以看到视频但没有听到音频。有什么想法吗？

编辑＃2：我需要我的2个视频在Apple Safari上正确播放 - 除了嵌入Youtube视频的所有用户都将看到之外，其他什么都不重要。是否有人可以告诉我将AVI转换为保证在Apple Safari上工作的视频格式的确切步骤？

- HerrimanCoder

Answer 1

你的视频使用MPEG-4 Part 2视频和AAC音频进行编码。MPEG-4 Part 2视频不受Google Chrome支持。除非您手动安装额外的编解码器，否则仅有的两个浏览器都支持的视频编解码器是H.264（也称为MPEG-4 Part 10或MPEG-4 AVC）。如果您重新编码为H.264，则应将其放置在具有AAC音频和.mp4文件扩展名（而不是.mov）的MP4容器中。

- mark4o

---

我已经有所进展，但现在在iPad上（Chrome可以工作，iPhone也可以工作），我可以看到视频但听不到声音。有什么想法吗？http://www.mapsandtreasures.com/HowToCreate_iOS.php - HerrimanCoder

@SweatCoder，你在那个页面上的视频仍然是一个.mov文件。 - mark4o

当我将扩展名更改为mp4时，它根本无法播放 - 完全损坏。你能启发我吗？ - HerrimanCoder

@SweatCoder：现在你的音频是PCM格式。对于mp4容器，请使用AAC或MP3音频。请参考https://developer.mozilla.org/en-US/docs/Web/HTML/Supported_media_formats#AutoCompatibilityTable，了解浏览器支持的组合。 - mark4o

我需要我的两个视频在苹果Safari上正确播放 - 其他任何事情都不重要，因为除了苹果设备的用户外，所有用户都将看到嵌入Youtube的视频。有人能告诉我确切的步骤，将AVI转换为保证在苹果Safari中正常工作的视频格式吗？ - HerrimanCoder

我曾经遇到过同样的问题，这个答案真的帮了我很多，谢谢。 - lerichard_v

Answer 2

网络视频很复杂，大多数浏览器支持不同的视频格式（编解码器）。为了兼容所有浏览器，您需要将每个视频转换为3种不同的文件格式：MP4、OGG和WEBM。

为了最大程度地提高兼容性，以下是您的视频工作流程：

• 制作一个使用WebM（VP8 + Vorbis）的版本。
• 制作另一个版本，使用H.264基线视频和AAC“低复杂度”音频在MP4容器中。
• 制作另一个版本，使用Theora视频和Vorbis音频在Ogg容器中。
• 从单个元素链接到所有三个视频文件，并回退到基于Flash的视频播放器。

<video width="320" height="240" controls>
    <source src="video.mp4"  type="video/mp4">
    <source src="video.webm" type="video/webm">
    <source src="video.ogv"  type="video/ogg">
</video>

来源：http://diveintohtml5.info/video.html#what-works

这篇文章介绍了HTML5视频的支持情况，包括哪些浏览器和操作系统支持哪些视频格式。它还提供了一些技巧和工具，帮助你在不同设备上实现最佳的视频播放体验。无论是想要在桌面电脑上播放视频还是在移动设备上播放视频，这篇文章都值得一读。

- Mike

Answer 3

你可能想尝试像这样的东西：

<video controls>
<source src="somevideo.webm" type="video/webm">
<source src="somevideo.mp4" type="video/mp4">
I'm sorry; your browser doesn't support HTML5 video in WebM with VP8 or MP4    with H.264.

更多帮助请看这里 html5视频。

- Robert Araujo

Answer 4

不同的视频类型支持不同的浏览器。您可以使用一些软件（如DVDVideoSoft免费HTML5视频播放器和转换器或其他软件）将视频转换为HTML5格式。在第二个视频中，您正在使用仅播放音频的mov视频。

- Manish