HTML5 视频标签不显示亚马逊视频

Posted 2023-04-14

【中文标题】HTML5 视频标签不显示亚马逊视频

【英文标题】：HTML5 video tags not showing amazon videos

【发布时间】：2014-07-02 11:29:33

【问题描述】：

我想在 amazon cloudFront 上观看视频，但没有显示

<video id="video1" controls  autoplay>
<source src="http://d191za0n1uuhbv.cloudfront.net/2/testing - 14.mp4" type="video/mp4">
</video>

我已根据线程 How do you configure S3 and Cloud Front to stream html5 video? Tried everything 更改了 Content-Type 和 Content-Disposition，但仍然没有运气

我也公开了视频，但也没有用

我也试过这样说，但也没用

<video id="video1" controls  autoplay>
<source src="http://vidorabia.s3.amazonaws.com/2/testing%20-%2014.mp4"  type="video/mp4">
</video>

我错过了什么吗？

【参考方案1】：

您发布的代码完美运行。你确定浏览器支持视频标签吗？检查http://caniuse.com/#search=video

您应该始终致力于支持大多数浏览器，不幸的是 HTML5 还没有得到很好的支持。您可以在 video 标签内提供后备解决方案。

即

<video id="video1" controls  autoplay>
 <source src="http://vidorabia.s3.amazonaws.com/2/testing%20-%2014.mp4">
 <object type="application/x-shockwave-flash" 
   data="player.swf?file="http://vidorabia.s3.amazonaws.com/2/testing%20-%2014.mp4">
    <param name="movie" value="player.swf?file="http://vidorabia.s3.amazonaws.com/2/testing%20-%2014.mp4">
    <a href="http://vidorabia.s3.amazonaws.com/2/testing%20-%2014.mp4">Download the video </a>
 </object>
</video>

基本上支持 HTML5 的浏览器将使用本机视频。其他浏览器会尝试使用该插件。如果还是不行，可以提供下载链接。

【讨论】：

是的... bcz 来自 w3schools 的视频在上传到亚马逊并使用上述代码 (w3schools.com/tags/canvas_drawimage.asp) 时工作​​正常，但任何其他视频都不是。

不幸的是，这还不够。我在 Chrome 34 上尝试了你的代码，它可以工作。浏览器可以支持标签但不支持格式/编解码器。在caniuse.com/video 中有一个子功能部分，其中包含对特定编解码器的浏览器支持。