Html iPad/iphone 上的 HTML5 视频背景
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9260501/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML5 video background on iPad/iphone
提问by AlexBrand
I used this solutionto use an html5 video as the background of my site.
我使用此解决方案将 html5 视频用作我网站的背景。
However, it doesn't seem to work on iPad/iphone, all I am getting is a black screen, and the video is not resizing.
但是，它似乎不适用于 iPad/iphone，我得到的只是黑屏，并且视频没有调整大小。
Also, the video does not resize correctly when the aspect ratio of the window is not the same as the aspect ratio of the video. You will see that the background image begins to become visible.
此外，当窗口的纵横比与视频的纵横比不同时，视频无法正确调整大小。您将看到背景图像开始变得可见。
Thanks!
谢谢！
回答by Juan Carlos Posé Ruiz
In http://www.develooping.com/canvas-video-player/you can see a responsive mp4 background working in iPad/iPhones. Download the code from http://www.develooping.com/wp-content/uploads/2016/04/html-canvas-video-player.zip. It uses an adapted version of HTML canvas video player script by Stanko;
在http://www.develooping.com/canvas-video-player/ 中，您可以看到在 iPad/iPhone 中工作的响应式 mp4 背景。从http://www.develooping.com/wp-content/uploads/2016/04/html-canvas-video-player.zip下载代码。它使用了Stanko的HTML 画布视频播放器脚本的改编版本；
<div class="video-responsive">
<video class="video" muted="muted" loop="loop" autoplay="autoplay">
<source src="mY_movie.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
<canvas class="canvas"></canvas>
<div id="over_video">Look at me</div>
</div>
The script is used as follows
脚本使用如下
<script src="canvas-video-player.js"></script>
<script>
var isIOS = /iPad|iPhone|iPod/.test(navigator.platform);
if (isIOS) {
var canvasVideo = new CanvasVideoPlayer({
videoSelector: '.video',
canvasSelector: '.canvas',
timelineSelector: false,
autoplay: true,
makeLoop: true,
pauseOnClick: false,
audio: false
});
}else {
// Use HTML5 video
document.querySelectorAll('.canvas')[0].style.display = 'none';
}
</script>
The CSS is
CSS是
body {
background: #000;
padding:0;
margin:0;
}
.video-responsive {
padding-bottom: 56.25%;
position: relative;
width: 100%;
}
.canvas,
.video {
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
background: #000;
z-index: 5;
}
#over_video{
position: absolute;
width: 100%;
height: 100%;
text-align: center;
top: 0;
z-index: 10;
font-size: 12vw;
color: #FFF;
font-family: Verdana, Arial, Helvetica, sans-serif;
margin-top: 20%;
text-shadow: 4px 4px 4px #5C433B;
}
Hope it can help.
希望它能有所帮助。
回答by Chien Chieh Wang
Just mark as record. Nowadays, the ability of background video get supported (iOS 10 +) due to the new policies of WebKit.
只需标记为记录。如今，由于WebKit的新政策，背景视频的能力得到了支持（iOS 10+）。
To be specific, check out the official document below. https://webkit.org/blog/6784/new-video-policies-for-ios/
具体可以查看下面的官方文档。 https://webkit.org/blog/6784/new-video-policies-for-ios/
回答by amcc
Since iOS10 there is a solution, see here: https://webkit.org/blog/6784/new-video-policies-for-ios/
由于 iOS10 有一个解决方案，请参见此处：https://webkit.org/blog/6784/new-video-policies-for-ios/
On iPhone, <video playsinline> elements will now be allowed to play inline, and will not automatically enter fullscreen mode when playback begins.
<video> elements without playsinline attributes will continue to require fullscreen mode for playback on iPhone.
When exiting fullscreen with a pinch gesture, <video> elements without playsinline will continue to play inline.
在 iPhone 上，<video playsinline> 元素现在将被允许内联播放，并且在播放开始时不会自动进入全屏模式。
<video> 没有 playsinline 属性的元素将继续需要全屏模式才能在 iPhone 上播放。当使用捏合手势退出全屏时，<video> 没有 playinline 的元素将继续内联播放。
回答by Bekki
Unfortunately, the iPad doesn't support automatic video play, so you'd need a play/stop/pause button. Here's an example of something that does work on iPad: http://html5-fullscreen-video.ceseros.de/html_5_fullscreen/movie/1
不幸的是，iPad 不支持自动视频播放，因此您需要一个播放/停止/暂停按钮。以下是在 iPad 上运行的示例：http: //html5-fullscreen-video.ceseros.de/html_5_fullscreen/movie/1
回答by Gilberto
SquareSpace uses an interesting approach to "simulating" video on their website by using a clever loop of .pngs and overlays. See http://www.squarespace.com/
SquareSpace 使用一种有趣的方法通过使用 .png 和叠加层的巧妙循环来“模拟”他们网站上的视频。见http://www.squarespace.com/
If you sift through the HTML you will find the hand sequence here: http://cf.squarespace.com/details/musician-hand-sequence-hires.png
如果您筛选 HTML，您会在此处找到手部序列：http: //cf.squarespace.com/details/musician-hand-sequence-hires.png
It works on phones.. Just something to think about.
它适用于手机......只是需要考虑的事情。
回答by user1169629
The only way to autoplay videos on mobile devices is to ditch the html video tag.
在移动设备上自动播放视频的唯一方法是放弃 html 视频标签。
I see three options, assuming you don't need audio:
我看到三个选项，假设您不需要音频：
- Use a gif instead of the video. Depending of the animation, the file size will skyrocket though
- Use a really long jpg or png that contains every frame of the video and then shift through them with javascript
- Decode the video with javascript. For example use this h.264 decoder and play videos with good compression. Only downside I see is that it requires quite some CPU for the decoding.
- 使用 gif 而不是视频。根据动画的不同，文件大小会猛增
- 使用包含视频每一帧的非常长的 jpg 或 png，然后使用 javascript 切换它们
- 使用 javascript 解码视频。例如，使用这个 h.264 解码器并以良好的压缩率播放视频。我看到的唯一缺点是解码需要相当多的 CPU。
I went for the last solution and it works fine.
我去了最后一个解决方案，它工作正常。
回答by Mortalus
I have stumbled upon something that might help you with this task..
我偶然发现了一些可以帮助你完成这项任务的东西。
http://vagnervjs.github.io/frame-player/
http://vagnervjs.github.io/frame-player/
Its a JS player that receives a JSON list of images representing frames of the video.
它是一个 JS 播放器，它接收表示视频帧的 JSON 图像列表。
This will also provide flexibility with regards to styling options of the video itself and responsiveness..
这也将为视频本身的样式选项和响应能力提供灵活性。
- You could load a different set of images (lower in quality) to suuport IPADs vs. desktop support for instance.
- 例如，您可以加载一组不同的图像（质量较低）来支持 IPAD 与桌面支持。
回答by Arnoldas
Most easiest way I think, just use gif for background. For example you can convert it online like in http://ezgif.com/video-to-gif
我认为最简单的方法，只需使用 gif 作为背景。例如，您可以像在http://ezgif.com/video-to-gif 中那样在线转换它
