html5 – 用于HTML的H.264 / FLV最佳实践

我经营一个网站,其中约有700个参考视频(不,不是色情 – 让你的头脑从天沟:-)).

视频目前为FLV格式.我们使用JWPlayer来渲染这些视频. IIS6托管一切都很好.

据了解,H.264(不是FLV,可能不是OGG)是新兴的HTML5视频标准.今天,iPad真的只尊重H.264或YouTube.大概,很多更重要的浏览器将跟随苹果的领先地位,并且只会尊重HTML5标签.

好的,所以我想我可以弄清楚如何将现有的视频转换成正确的H.264格式.有各种工具可用,包括ffmpeg.exe.我还没有尝试过,但是我不认为这是编解码器设置的问题.

我的问题更多的是容器本身 – 也就是规划所有用户的优雅过渡.对这些视频进行最佳实践建议是什么?如果我只是使用HTML5标签,那么推测任何不支持HTML5的浏览器都不会看到这些视频.如果我通过JWPlayer或其他播放器以Flash格式呈现,那么iPad将无法播放.我必须在这里做丑陋的UserAgent检测,以弄清楚要呈现的内容

我知道JWPlayer支持H.264媒体,但播放器本身不是Flash组件,因此在iPad上无法播放?对不起,如果我不清楚,但我正在抓住我的头脑,在一个优雅的过渡计划,将适用于当前的浏览器,iPad和即将到来的HTML5波.我不是视频专家,所以任何建议都是最受欢迎的,谢谢.

解决方法

请注意,Firefox不支持使用视频标签的H.264,因此,如果您想要优雅的回退,那么您应该渲染如下所示的视频标签,并具有视频的OGG版本.
<video controls id="video" width="320" height="240" preload autobuffer >
            <source src="http://mycdn.com/videos/vid1.ogg" type="video/ogg" />
            <source src="http://mycdn.com/videos/vid1.mp4" type="video/mp4" />
            <!--RENDERED ON broWSERS WITH NO HTML5 VIDEO SUPPORT-->
            <object width="320" height="240">
            <param name="movie" value="myplayer.swf">
            <embed src="myplayer.swf" width="550" height="400">
            </embed>
            </object>
             <!---->
        </video>

相关文章

HTML5和CSS3实现3D展示商品信息的代码
利用HTML5中的Canvas绘制笑脸的代码
Html5剪切板功能的实现
如何通过HTML5触摸事件实现移动端简易进度条
Html5移动端获奖无缝滚动动画实现
关于HTML5和CSS3实现机器猫的代码