根据用于播放的设备调整HTML5视频大小

时间:2013-02-25 15:34:12

标签: html5 video

我使用以下代码播放html5视频: -

<video id="my_video_1" class="video-js vjs-default-skin" controls preload="auto" width="640" height="264" data-setup="{}">
    <source src="http://s3.amazonaws.com/o2media.videolibrary/348.mp4" type='video/mp4'>
</video>

当我在浏览器中播放时,它运行良好,但它不会在iPhone或类似设备中播放。

如何调整这些视频的大小,以便它们能够在浏览器和其他设备中播放?

修改

有没有办法在调用函数时使用javascript调整窗口大小?

此致 维沙尔

1 个答案:

答案 0 :(得分:0)

如果您想调整视频大小,则有两种选择。第一个是简单地调整<video>元素上的宽度/高度参数,如果你发现你在iPhone上,第二个是调整元素的大小,但也选择一个更合适的比特率视频供移动使用而不是发送更高的比特率。

使用UserAgent检测(不太好)或CSS媒体查询(请参阅此文章 - http://www.quirksmode.org/blog/archives/2010/08/combining_media.html),您可以确定您拥有的窗口的大小,并可以相应地更改您的代码。

要调整窗口大小...大多数现代浏览器会禁用此功能,除非它是您自己创建的窗口 - 有关详细信息,请参阅The javascript "resizeTo" function not working in Chrome and Opera