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

2022-03-01 00:00:00 css mobile html5-video

我从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();

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

video{max-width:100%; height:auto}

这种方式是防弹的，而且总是有效的，更不用说您提供更高质量的视频了。当然，您也会遇到数据传输问题，因此对于大型视频，我建议使用方法1。

相关文章