通过媒体查询或在检测到手机时提供较小版本的视频-前端问题

Offering smaller versions of videos with media query or when mobiles are detected(通过媒体查询或在检测到手机时提供较小版本的视频)

本文介绍了通过媒体查询或在检测到手机时提供较小版本的视频的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我从2012年开始参加这个讨论： How to load different video for mobile devices and desktop web version? 因为我也有同样的问题。我的MP4、WebM和7Mb左右的Ogg视频在我的台式电脑上运行良好，但在我的Android智能手机上挂断得很惨。

@Subhajit给出了他尝试失败的示例代码：

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

，并参考了有关检测手持设备的最佳方法的堆栈溢出讨论。

但这只给出了检测站点何时在移动设备上被查看的建议。没有人提供他的示例的替代代码，用于在检测到移动设备后显示较小版本的视频。

我的响应站点CSS代码有@media (max-width:媒体查询。用于移动设备的设置为500px。如何修改@Subhajit的示例代码以显示视频的较小版本，可能会引用CSS文件中的媒体查询@media (max-width: 500px)编码？

我不愿使用移动检测、商业视频播放器或在线存储网站。

谢谢，@Fabio这里是我的代码，与您的第一个建议相差甚远：

<video controls>
<source src="portfolioVideos/testMovieWEnd480x270.mp4.mp4" type="video/mp4" media="all and (max-width: 500px)">
<source src="portfolioVideos/testMovieWEnd480x270.webmsd.webm" type="video/webm" media="all and (max-width: 500px)">
<source src="portfolioVideos/testMovieWEnd720x405.mp4.mp4" type="video/mp4"> 
<source src="portfolioVideos/testMovieWEnd720x405.webmsd.webm" type="video/webm">

我制作了两个5秒的"电影"，由一个"测试模式"组成，它的结尾仍然是一个"结尾"。电脑屏幕上的大电影是720x405像素，标记为"电脑用"。移动屏幕上的小电影是480x270像素，标记为"移动"。当我在Firefox和Safari中切换窗口大小(并刷新)时，它们实际上会显示正确的版本。Chrome只显示移动版本。(颠倒编码顺序只会让一切变得更糟。)

当我在手机仿真程序中输入视频html时，手机版也会出现。但当我在我的Android智能手机上调出它时，它的VID太小了，我无法读取它的版本，甚至无法点击它。

我看了你推荐的Chris Coyier页面，但我想不通。如何搜索有关此jQuery代码的更多信息？感谢您以前的关注和任何可能的关注。

我在这个问题上试了几个新思路。

首先，我尝试使用jQuery"Window Width"方法和if/Else条件将视频的小版本或大版本放入iFrame。

$(document).ready(function () {
if ($(window).width() < 550) {
<iframe src=... width="480" height="270"></iframe>
}
else {
<iframe src=... width="720" height="405"></iframe>
}
});
</script>

那不管用。Safari和Chrome都给了我一个"意想不到的标记‘<；’"错误，我的理解是"当你要包含或发布到一个不存在的文件时"。这些文件在直接打开时存在并工作。我尝试使用@amenadiel推荐的绝对URL，但也不起作用。

第二，我尝试了带有if/Else条件的"Window Location"。

$(document).ready(function () {
if ($(window).width() < 330) {
window.location.href = ...;
}
else {
window.location.href = ...;
}
});

在两个在线仿真器上的各种模拟设备和窗口大小中进行测试时，这是有效的。但它在我的Android智能手机上不起作用。在那里，屏幕左上角只有一个很小的、空的、无法单击的视频窗口。

我可能已经回答了自己的问题。

我在这里找到： https://github.com/etianen/html5media/wiki/embedding-video

这个超级简单的代码：

<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
</head>

<body>
<video poster="poster.jpg" width="618" height="347" controls preload> 
<source src="video.mp4" media="only screen and (min-device-width: 568px)"></source> 
<source src="video.iphone.mp4" media="only screen and (max-device-width: 568px)"></source> 
</video>

这似乎奇迹般地奏效了。看看这一页， http://willsoper.net/videoPortfolio.html 它包含两个视频，每个都有一个大版本和一个小版本。先试试右边的"测试模式"，它只有10秒长。较大的版本标有"供‘puter’使用"，较小的版本标记为"for Mobi"。在垂直位置的三星Galaxy Android上，会出现"Mobi"版本。如果我按下"后退"键，将手机调至水平位置，然后再试一次，则会出现较大的"‘puter’版本"。

左边的那个男人的视频也有一个小版本和大版本，看起来工作方式是一样的。它要长得多，在我的智能手机上，它有时会短暂地重新缓冲一两次。

具有讽刺意味的是，我之前的代码可以在在线模拟器中运行，但不能在实际的智能手机上运行。这个可以在我的智能手机上运行，但不能在模拟器上运行。

了解其他人(特别是@Fabio)的经验以及我可以如何改进代码，我将不胜感激。

推荐答案

您有两个选择：

1)提供您刚才提到的基于媒体查询的视频服务。您只需根据设备宽度设置不同的大小，如下所示：

<video> 
   <source src="video-ipad.mp4" type="video/mp4" media="all and (max-width: 768px)"> 
   <source src="video-mobi.mp4" type="video/webm" media="all and (max-width: 768px)"> 
   <source src="video-mobi.mp4" type="video/mp4" media="all and (max-width: 480px)"> 
   <source src="video-mobi.webm" type="video/webm" media="all and (max-width: 480px)"> 
   <source src="video.mp4" type="video/mp4"> 
   <source src="video.webm" type="video/webm"> 
</video>

您还可以使用一些JQuery屏幕检测，如this page

所示

var mainVideo = $('#the-video');

if ($(window).width() < 1200 && medQualVersion) {
  mainVideo.append("<source type='video/mp4' src='" + medQualVersionSrc + "' />");
} else {
  mainVideo.append("<source type='video/mp4' src='" + highQualVersionSrc + "' />");
}
mainVideo.append("<source type='video/webm' src='" + webMSrc + "' />");

// Wait until sources are appended to call MediaElements.js
mainVideo.mediaelementplayer();

第二个选项是简单地为高质量视频提供服务器并调整其大小，如下所示：