跨浏览器兼容的内联视频解决方案
我的公司开始推出大量在线教程/培训视频，这些视频将以内联方式显示在网页上。我们需要一个简单的跨浏览器解决方案，可以容纳大多数用户在线观看。
我读过的一个解决方案(并不是很简单)是为每个视频创建一个flash、mp4和avi版本，然后让javascript插件决定哪个浏览器最适合。
回答 6
Stack Overflow用户
发布于 2011-08-17 23:41:06
我已经尝试过让视频在所有浏览器上播放。最好的方法是设置一个带有flash回退功能的html5视频标签。这实际上不需要任何javascript就可以工作。这个网站：http://camendesign.com/code/video_for_everybody对如何做到这一点做了很好的解释。
你会想要设置一些基本上看起来像这样的东西：
<video width="640" height="360" controls>
<!-- MP4 must be first for iPad! -->
<source src="__VIDEO__.MP4" type="video/mp4" /><!-- Safari / iOS video -->
<source src="__VIDEO__.OGV" type="video/ogg" /><!-- Firefox / Opera / Chrome10 -->
<!-- fallback to Flash: -->
<object width="640" height="360" type="application/x-shockwave-flash" data="__FLASH__.SWF">
<!-- Firefox uses the `data` attribute above, IE/Safari uses the param below -->
<param name="movie" value="__FLASH__.SWF" />
<param name="flashvars" value="controlbar=over&image=__POSTER__.JPG&file=__VIDEO__.MP4" />
<!-- fallback image. note the title field below, put the title of the video there -->
<img src="__VIDEO__.JPG" width="640" height="360" alt="__TITLE__"
title="No video playback capabilities, please download the video below" />
</object>
</video>video标签是一种html5标签，可用于在现代浏览器上显示视频文件。但是，您需要几种不同的格式才能在每种格式中正确显示它。例如，火狐只接受webm和ogg格式，而Safari只接受h264和mp4格式。这里有一篇很棒的文章：http://diveintohtml5.ep.io/video.html。你可以下载一个简单的转换软件，将你的视频转换成所有这些格式，可以在这里找到：http://www.mirovideoconverter.com/。其他浏览器(尤其是IE)不接受html5视频标签，因此您必须包含一个flash格式，如果它不知道如何处理视频标签，它将自动使用该格式。
最后，由于缺乏兼容的标准，你将不得不为你的一个视频文件创建至少3-4种不同的格式，以使其跨浏览器和平台(iOS移动)工作。确保您的服务器对这些格式使用正确的mime类型也很重要。这很糟糕，但就目前而言，这是唯一的方法。
Stack Overflow用户
发布于 2012-09-14 15:06:58
到目前为止最好的解决方案：
http://www.videojs.com/
如何实现：
标题：
<link href="http://vjs.zencdn.net/c/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/c/video.js"></script>正文：
<div class="vid">
<video id="vid01" class="video-js vjs-default-skin" controls="controls" preload="none" width="640px" height="264px"
poster="../../Content/YourInitialPicture.jpg">
<source src="../../Content/YourVideo.mp4" type='video/mp4'/> <!-- IE / Safari -->
<source src="../../Content/YourVideo.webm" type='video/webm'/> <!-- Mozilla FF -->
<source src="../../Content/YourVideo.ogg" type='video/ogg'/> <!-- Chrome / Opera -->
<track kind="captions" src="../../Content/YourVideoCaption.vtt" srclang="en" label="English" />
</video>
<script>
var myPlayer = _V_("vid01");
</script>
</div>将上述代码复制/粘贴到您的<body></body>，并将视频的路径添加到src="../../"
- .mp4 (Safari和IE可以播放这种类型的vids)
- .webm (Mozilla可以播放这种类型的vids)
- .ogg (Theora视频)
你可以在你的视频中使用这些免费的召集器。
- Free Video Converter (这个conventer很容易使用..我个人更喜欢this.)
- Free WebM Video Converter
就这么简单！
Stack Overflow用户
发布于 2011-08-17 23:33:50
要获得商业解决方案，请查看http://www.sublimevideo.net/
免费请查看http://www.videojs.com/
https://stackoverflow.com/questions/7095355
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号