关于网页背景用视频的五个问题及解决方法

本文涉及网页背景用视频的五个问题，分别是：如何让视频自适应屏幕、上线后打开总是调起迅雷是什么原因、如何解决加载问题、如何用按钮控制背景视频的声音、全屏预览问题，本文将对这五个问题进行探讨，并提出解决方法。

一、如何让视频自适应屏幕？

一开始我用写背景图片的路子写视频的自适应，但无论如何都实现不了，后来在CSDN找到了方法，其实只需要给video写样式position:fixed;就知道如何解决了。

二、上线后打开总是调起迅雷下载背景视频是什么原因？

原因是你的video写的不规范，如果调起迅雷那你一定是这样写的

<video autoplay="autoplay" loop="loop" src="video/bv.mp4">

规范的写法是

<video muted autoplay="autoplay" loop="loop" poster="images/bv.jpg">
  <source src="video/bv.mp4" type="video/mp4">
</video>

如此写便不会调起迅雷。

2019年8月18日补充：如果还是调起迅雷，那就把迅雷这东西卸载了。

三、如何解决加载问题？

要加载非常快就要解决存储问题和视频大小问题，存储强烈建议大家选择西部数码独享云虚拟主机，详阅：云存储新选择：西部数码独享云虚拟主机；之所以网页背景用视频，是因为视频更有视觉冲击力，视频会让网页看起开很炫酷，所以视频既要处理到最小又要保持清晰度，推荐格式工厂，格式工厂的MP4默认输出配置是：最优化的质量和大小，这个可以把一个近400M的视频压缩到50M，其实还可以选择AVC高质量和大小

经测试可以把50M的视频压缩到30M，AVC中质量和大小及以下视频会出现模糊，不建议选择。

四、如何用按钮控制背景视频的声音？

为用户体验考虑，默认状态下背景视频是静音的，而且也必须如此，因为如果不用静音属性muted，在谷歌浏览器和火狐浏览器中就算加了autoplay视频也无法自动播放，所以要用按钮控制背景视频的声音首先要解决在没加muted属性的情况下在谷歌浏览器和火狐浏览器中也能自动播放，这个是浏览器的限制问题，详情可以阅读文章：https://blog.csdn.net/weixin_44093239/article/details/85803103，按文中解决方案2解决，我没有解决这个问题，因为我不想要这个交互，所以用按钮控制背景视频声音还请大家研究。

五、全屏预览问题

网页背景用视频后，自然是全屏预览效果最佳，但并不是所有用户都会按F11，所以需要在页面上做一个按钮，点击全屏，并且按钮状态也要随屏幕状态变化，截取的html代码如下：

<span><a title="全屏预览" class="btn-full" onClick="launchFullScreen(document.documentElement)"><img src="images/qp.png"></a><a title="退出全屏" class="btn-exit" onclick="exitFullscreen()"><img src="images/escqp.png"></a></span>

在样式里先让退出全屏的按钮隐藏。js如下：

//开启全屏
function launchFullScreen(element) {
	if (element.requestFullscreen) {
		element.requestFullscreen();
	} else if (element.mozRequestFullScreen) {
		element.mozRequestFullScreen();
	} else if (element.webkitRequestFullscreen) {
		element.webkitRequestFullscreen();
	} else if (element.msRequestFullscreen) {
		element.msRequestFullscreen();
	}
}

//退出全屏
function exitFullscreen() {
	if (document.exitFullscreen) {
		document.exitFullscreen();
	} else if (document.mozExitFullScreen) {
		document.mozExitFullScreen();
	} else if (document.webkitExitFullscreen) {
		document.webkitExitFullscreen();
	}
}

//通过监听fullscreenchange事件实现全屏状态时显示退出全屏按钮，非全屏状态时反之。
document.addEventListener("fullscreenchange", function (event) {
	if (document.fullscreenElement) {
		$('.btn-full').hide();
		$('.btn-exit').show();
	} else {
		$('.btn-full').show();
		$('.btn-exit').hide();
	}
});

以上就是网页背景用视频的五个相关问题及解决方法，本文另外参考文章：点击按钮触发浏览器全屏显示：https://www.cnblogs.com/cathy1024/p/10874460.html，更多关于video标签的使用请阅读文章：利用编辑器源码功能给文章添加视频的方法（其它cms通用）。