网页视频背景设置带声音自动播放

简介: 网页设计问题记录


网页设计问题

视频背景的设置

在网页设计中,我们可能想到把视频设计为网页背景,为其增添不少色彩。如:视频例子链接


其设置只需在在HTML的主体区域内(body标签)写下如下代码即可。

<videoid="video"style="width:100%; height:100%; object-fit:cover; position:absolute; top:0; left:0; "autoplayloopmuted><sourcesrc="视频路径"type="video/mp4"></video>

视频的自动播放


> 我们在HMTL写下上面的代码后,不难发现视频背景已经成功设置了,同时也能自动循环播放了,但此时是静音循环自动播放的。因为autoplay为自动播放,loop为循环播放,muted为静音播放。如果video中只有autoplay没有muted,是处于待播放状态的(即静止面面),所以自动播放中必须带有muted属性。


不过只是网页添加视频的话,可以在video标签内添加 controls='controls' 属性和属性值,达到控制视频的效果。如图:

image.png


开启声音的问题解决


> 如果我们想要网页背景视频能自动播放又带声音,该怎么办呢?首先,若是自动播放就开启声音了,我是无法解决的,就是上面的autoplay和muted应该是要一起使用的,从这里就有些矛盾,可能是注重用户体验才有这种情况的设定。


但是,我们可以通过在JS中添加点击事件使其开启声音。效果是打开网页,视频自动播放,开启声音需要你鼠标点击。代码如下:

window.onload=function(){
varvideo=document.getElementById("video"); //获取videodocument.body.addEventListener('mousedown', function(){
video.muted=false;
  }, false);  //点击事件,点击页面即可开启声音}

其中,window.onload = function(){}的添加是因为解决 Uncaught TypeError: Cannot read property 'addEventListener' of null 的问题。

window.onload = function(){事件} 即当页面加载完成后才执行事件。


当你点击网页后,声音便可循环播放了,听多了的确有些影响体验。

image.png

我们可以通过如图点击暂停声音播放。

目录
相关文章
|
消息中间件 存储 负载均衡
一文读懂RocketMQ的高可用机制——消息发送高可用
一文读懂RocketMQ的高可用机制——消息发送高可用
652 1
|
JavaScript 前端开发
vue3通过render函数实现一个菜单下拉框
【8月更文挑战第18天】vue3通过render函数实现一个菜单下拉框
373 0
|
11月前
|
SQL 消息中间件 分布式计算
大数据-120 - Flink Window 窗口机制-滑动时间窗口、会话窗口-基于时间驱动&基于事件驱动
大数据-120 - Flink Window 窗口机制-滑动时间窗口、会话窗口-基于时间驱动&基于事件驱动
252 0
|
8月前
|
数据可视化 数据挖掘
阿里云百炼/析言GBI在产品博士中是怎么发挥作用的?请看此视频了解
阿里云百炼/析言GBI在产品博士中通过数据分析和可视化展示,帮助用户了解产品的GAAP收入情况。视频展示了2024年4月至7月期间,浙江地区的公共云产品每月GAAP收入,按月增序排列,并提供了详细的行业收入对比和日收入数据。图片展示了具体的数据图表,便于用户直观理解。
204 1
|
11月前
|
存储 PHP 对象存储
开源免费的图床源码整理汇总-个人自用图床相册程序推荐
开源免费的图床源码整理汇总-个人自用图床相册程序推荐
2005 0
|
编解码 前端开发 JavaScript
带您一步步构建一个基本的动态新闻网站,包括页面布局、样式设计以及交互效果的实现
【6月更文挑战第14天】构建动态新闻网站实战项目,涉及页面布局、样式设计和交互实现。首页采用顶部导航栏、轮播图和新闻列表布局;新闻列表页按分类显示新闻,详情页展示完整内容并可添加相关推荐和评论。设计注重色彩搭配、字体选择和布局间距,实现轮播图效果、导航栏交互和响应式设计,提升用户体验。该项目有助于锻炼HTML和CSS技能,理解网页设计实际应用。
508 1
|
移动开发 小程序 API
uniapp组件库中Collapse 折叠面板 的使用方法
uniapp组件库中Collapse 折叠面板 的使用方法
1819 1
|
存储 JavaScript API
Vue 3 中实现引导页
Vue 3 中实现引导页
Unix环境高级编程(第三版)中apue.h头文件及其依赖安装教程
Unix环境高级编程(第三版)中apue.h头文件及其依赖安装教程
375 0
|
算法 网络协议 安全
一个关于proto 文件的经验分享 :gRPC 跨语言双端通信显示错误码:12 UNIMPLEMENTED (附赠gRPC错误码表)
一个关于proto 文件的经验分享 :gRPC 跨语言双端通信显示错误码:12 UNIMPLEMENTED (附赠gRPC错误码表)
439 0