HTML5 video background solution(网页视频融入背景兼容解决方案)

在网页中插入视频我们常常会希望它能自动播放同时融入网页背景。关于如何在不同设备和浏览器中兼容自动播放，可以看这里，今天来谈谈如何在融入背景上做兼容。

mp4视频插入网页后，当需要和背景融合的时候常常会发现颜色不一致，这个问题是如何产生的？有人认为是视频编码时，color range使用的是limited而不是full的原因，也有人认为是浏览器使用了GPU的硬件加速导致的。在这里我并不care这些原因，毕竟作为开发者，既无法要求用户采用同一标准来生产视频，也无法强求用户在浏览的时候使用同一设备同一浏览器。所以，whatever，我们要解决的是，无论什么理由，我们得让视频在网页中融合背景。

我们需要考虑的设备是win,mac,ios,android，浏览器是chrome,safari,firefox,ie。

思路是使用canvas来载入视频，然后读取canvas里的视频背景颜色，再设置到网页的背景颜色中。以此来达到背景色和视频融为一体的效果。

当视频是自动播放时，在IE中无法使用play这个Event来获取视频信息，同时，如果视频跨域，则在IE中无法使用canvas来获取颜色信息。基于此，不考虑在IE中使用canvas。考虑到ie的使用场景几乎只有在win中，且用户数逐日减少，我们不打算考虑太多IE上的兼容可能性。通过在css中，设定网页背景和ie中播放视频的背景色一致的方式，使用ie的大多数用户应该可以确保视频和网页背景是融入的。

除去IE，则其他所有现代浏览器，无论win,mac,ios,android上都是完整支持canvas的，所以兼容起来就简单了。以下为详细思路。

我们找到需要融入背景的视频<video>标签，在标签之上添加canvas，设置video在play事件的时候，使用window.requestAnimationFrame在canvas上使用drawImage将视频描绘在canvas画布上。同时抓取canvas上固定的背景点的颜色值，写入网页背景。再将video标签css设置为visibility:hidden;隐藏显示，即可。

以下是相关代码示例

HTML

1
2
3
4
5
<div class="video_need_bg">
    <div class="video_in">
        <video id="myVideo" style="object-fit:fill;" autoplay playsinline preload="auto" loop muted src="test.mp4"> Sorry, your browser doesn\'t support embedded videos.  </video>
    </div>
</div>

CSS

1
2
3
4
5
6
7
.video_need_bg {
    background:#000;
}
canvas+video {
    visibility: hidden;
    opacity: 0;
}

JavaScript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
/**
* 示例代码使用jQuery
*/
$('.video_need_bg').each(function () {
        /**
         * 该功能不支持ie
         * getDevice为自定义函数用于获取用户代理判断当前浏览器环境
         */
        if (getDevice() == 'IE浏览器') return;

        var that = $(this);
        that.addClass('video_need_bg_ready');

        var v = that.find('video').eq(0);
        var video_v = v[0];
        var a = that.find('.canvas_video');
        if (a.length &lt; 1) {
            v.before('');
            a = that.find('.canvas_video');
        }
        var canvas_a = a[0];
        var ctx = canvas_a.getContext('2d');

        function init() {
            canvas_a.width = video_v.videoWidth;
            canvas_a.height = video_v.videoHeight;
            ctx.drawImage(video_v, 0, 0, canvas_a.width, canvas_a.height);
            var data = ctx.getImageData(5, 5, 1, 1).data;
            that.css('background-color', 'rgba(' + data[0] + ',' + data[1] + ',' + data[2] + ',' + data[3] + ')');
            window.requestAnimationFrame(init);
        }

        video_v.addEventListener('play', init);

        /**
         * ios需要此段使canvas能播放视频
         */
        $(window).on('load', function () {
            video_v.play();
        });
    });

html5 video 视频背景