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

时间:2015-06-09 13:38:20

标签: html5 html5-video

如果你看DEMO,你会看到顶级视频(红鼻子的中世纪家伙)在视频和音频方面都能完美播放。

但是如果你看一下底部(第二个)视频,当你播放它时,只有音频。 "视频图像"你看到的实际上不是视频本身,而是利用"海报" html标签。

以下是两个视频的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上,视频效果很好。难道我做错了什么?我似乎正在完成第一个视频的第二个视频。为什么1个工作而2个没有?

编辑:我进一步,但现在只在iPad(Chrome工作,iPhone工作)我得到视频,但没有音频。有什么想法吗?

编辑#2:我需要在Apple Safari上正确播放我的2个视频 - 没有其他问题,因为Apple设备以外的所有用户都会看到Youtube嵌入式视频。任何人都可以告诉我将AVI转换为保证在Apple Safari中运行的视频格式的确切步骤吗?

4 个答案:

答案 0 :(得分:2)

您的视频采用MPEG-4 Part 2视频和AAC音频进行编码。 MPEG-4第2部分视频不是supported by Google Chrome。除非您手动安装其他编解码器,否则Safari和Chrome支持的唯一视频编解码器是H.264(也称为MPEG-4 Part 10或MPEG-4 AVC)。如果您重新编码为H.264,则应将其放置在具有AAC音频和.mp4文件扩展名(不是.mov)的MP4容器中。

答案 1 :(得分:1)

你可能想尝试这样的事情:

fopen(file:////MIA_TEST/htdocs/SharedFolder/MIA - Digital Post Natal Records/Fiona Appleton_1946546288 09_06_2015.pdf): failed to open stream: No such file or directory

   

更多帮助html5 video

答案 2 :(得分:0)

不同的视频类型支持不同的浏览器。您可以使用某些软件(如DVDVideoSoft Free HTML5 Video Player And Converter或其他任何软件)转换HTML5格式的视频。在第二个视频中,您使用的是仅播放音频的mov视频。

答案 3 :(得分:0)

网络视频很复杂,大多数浏览器都支持不同的视频格式(编解码器)。为了与所有浏览器兼容,您需要3种不同文件格式的每个视频:MP4,OGG,WEBM。

  

为了获得最大的兼容性,以下是您的视频工作流程:

     
      
  • 制作一个使用WebM(VP8 + Vorbis)的版本。
  •   
  • 制作另一个版本,在MP4容器中使用H.264基线视频和AAC“低复杂度”音频。
  •   
  • 制作另一个在Ogg容器中使用Theora视频和Vorbis音频的版本。
  •   
  • 从单个元素链接到所有三个视频文件,然后回退到基于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