iPad / iPhone上的HTML5视频背景 [英] HTML5 video background on iPad/iphone

问题描述

我使用这个解决方案来使用html5视频作为我网站的背景。

I used this solution to use an html5 video as the background of my site.

然而，它似乎并不适用于iPad / iPhone，我所得到的只是一个黑屏，并且视频不会调整大小。

However, it doesn't seem to work on iPad/iphone, all I am getting is a black screen, and the video is not resizing.

另外，当窗口的宽高比与视频的宽高比不同时，视频不会正确调整大小。您会看到背景图片开始变得可见。

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.

谢谢！

推荐答案

在 http://www.develooping.com/canvas-video-player/ 你可以在iPad / iPhone上看到一个响应式mp4背景。从 http：// www下载代码.develooping.com /可湿性粉剂内容/上传/ 2016/04 / html-canvas-video-player.zip 。它使用Stanko的 HTML画布视频播放器脚本的改编版本;

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;

<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>

该CSS是

The CSS is

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;
}

希望它能帮上忙。

这篇关于iPad / iPhone上的HTML5视频背景的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！