工作室注册登录标签云赞助光荣榜

当前位置:首页 > 全栈分享 > 前端乱炖 > 正文

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

发布时间:2019-07-30 23:15:55作者:魏义齐阅读:()评论:

本文为博主原创文章,未经博主允许不得转载。

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

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

一开始我用写背景图片的路子写视频的自适应,但无论如何都实现不了,后来在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高质量和大小

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通用)

本文标签:,您可以阅读与「」相关的所有文章

魏义齐全栈技术交流:魏义齐全栈技术交流

上一篇:云存储新选择:西部数码独享云虚拟主机下一篇:使用vpn时,使用百度云加速的网站不能访问的两种解决方法及注意事项

原创不易,您的赞助就是博主更新的动力!

赞助请备注,8.88元及以上可在赞助光荣榜留下外链信息。

HashOver畅言云评完全自托管的评论系统

工作室注册登录标签云赞助光荣榜

最新会员
  • 东方星雨
  • deanhan
  • 1264822519
  • aini3311
  • a1051020101
  • weiyiqi