如何为移动设备和桌面网络版加载不同的视频？ [英] How to load different video for mobile devices and desktop web version?

问题描述

我正在使用Responsive Web Technology和HTML5开发一个网站。我有一个720x576分辨率的高清质量视频，我使用HTML5 < video> 和< source> 进行嵌入标签。

I am developing a website using Responsive Web Technology and HTML5. I have a HD quality video of 720x576 resolution which I am embedding using HTML5 <video> and <source> tags.

但是因为它是一个非常沉重的视频，所以我不想为Ipad和移动设备调整它的大小。相反，我想在Mobile / Ipad设备中打开网站时加载320x240分辨率的不同视频。我在< source> 标记中使用了媒体查询，但它不起作用，下面是我尝试过的代码示例。

But as its a very heavy video so I don't want to resize it for Ipad and mobile devices. Rather I would like to load a different video of 320x240 resolution when the site is opened in Mobile/Ipad devices. I have used the media query in <source> tag but its not workin, below is the sample of the code I have tried with.

<video controls>
   <source src="mySmallVideo.webm" type="video/webm" media="all and (max-width:600px)">
   <source src="myVideo.webm" type="video/webm">
</video>

任何想法如何实现这个要求，如果它可能与Jquery和javascript然后请提供给我一些想法或如果可能的话有一些链接。

Any idea how I can achieve this requirement, if its possible with Jquery and javascript then please provide me with some ideas or if possible with some links.

提前致谢。

推荐答案

我可以通过两种方法来考虑一种技术。

I can think of one technique with two approaches.

首先，在您的服务器端，您可以检测到浏览器的用户代理以及它是否与移动浏览器然后你可以将视频的src更改为你的低分辨率。

First of all on your server side you could detect the user agent of the browser and if it matches against a mobile browser then you could change the src of the video to be your lower resolution one.

第二种方法是使用javscript / jQuery来检测用户是否正在使用移动浏览器并做同样的事情，将视频的src更改为较低的分辨率。

The second approach would be to use javscript / jQuery to detect if the user is using a mobile browser and do the same thing, change the src of the video to be the lower resolution one.

这篇关于如何为移动设备和桌面网络版加载不同的视频？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！