当前位置:首页 > 实用技巧 >

网页插入的视频如何设置自动播放(怎么让网页自动播放视频)

来源:原点资讯(www.yd166.com)时间:2023-04-30 10:01:20作者:YD166手机阅读>>

一、在网页中添加单个视频:video元素

video属性:

  • src(源)-指定视频文件的URL
  • autoplay(自动播放)-当视频可以播放时立即开始播放
  • controls(控件)-添加浏览器为视频设置的默认控件
  • muted(静音)-让视频静音
  • loop(循环)-让视频循环播放
  • poster(海报)-指定视频加载时要显示的图像
  • width(宽度)-视频的宽度
  • height(高度)-视频的高度
  • preload(预加载)-告诉浏览器要加载的视频内容的多少。可以是以下三个值:
  1. □none表示不加载任何视频
  2. □metadata表示仅加载视频的元数据
  3. □auto表示让浏览器决定怎样做(默认设置) <video src = "my-video.ext" width = "369" height = "208"> </video> 复制代码

1.为视频添加控件:controls属性 会告诉浏览器添加一套用于控制视频播放的控件。

<video src = "my - video.ext" controls> </video>

2.为视频添加自动播放:autoplay属性

<video src = "my- video.ext" autoplay controls> </video>

3.为视频指定循环播放和自动播放:loop属性

<video src = "my- video.ext" autoplay loop> </video>

4.为视频添加指定海报图像:poster属性

<video src = "my- video.ext" controls poster= "my-poster.jpg"> </video>

5.阻止视频预加载: preload="none"

<video src= "my- video.ext" preload = "none" controls> </video>

6.使用多种来源的视频和备用文本

<video controls> <source src = "my- video.mp4" type = "video / mp4"> <source src = "my- video.webm" type = "video / webm"> </video> 复制代码二、在网页中添加带控件的单个音频文件:audio元素

<audio src="my-audio.ext" controls></audio>

自动播放、循环和预加载音频

<audio src = "my- audio.ext" autoplay controls> </audio> <audio src = "my- audio.ext"loop controls> </audio> <audio src = "my- audio.ext" preload="metadata" controls> </audio>

提供带有多个备用内容的多个视频源:

<audio controls> <source src = "my- audio.ogg" type = "audio / ogg"> <source src = "my- audio.mp3" type = "audio / mp3"> </audio>


作者:excavate

https://juejin.cn/post/6989513618781896740

栏目热文

怎么实现进去网页就自动播放视频(网页自动播放下一个视频)

怎么实现进去网页就自动播放视频(网页自动播放下一个视频)

经常使用Mac电脑的用户应该发现,在Safari浏览器内网页中的视频不能播放,这是因为Mac系统设置的默认Safari浏...

2023-04-30 09:34:41查看全文 >>

word没有保存怎么恢复(word没保存如何找回)

word没有保存怎么恢复(word没保存如何找回)

工作当中我们经常都会用到word文档,word文档可以提供多种格式,还有不同的字体、颜色可以选择,这也大大提高了团队的工...

2023-04-30 09:43:44查看全文 >>

word文档中的表格怎么添加序号(word表格里的内容怎么增加序号)

word文档中的表格怎么添加序号(word表格里的内容怎么增加序号)

我们的一些职场人在做工作时,尤其是在做工作总结或者向上级部门提交报告时,经常是文件写得很高大上,但是对于文中的一些表单处...

2023-04-30 09:41:19查看全文 >>

word文档第二行开头下划线(word文档行尾显示下划线)

word文档第二行开头下划线(word文档行尾显示下划线)

word里面的三种绘制下划线的方式,第一种简单方便,适合任何情况使用灵活,第二种样式丰富,第三种输入快捷省事。[耶]视频...

2023-04-30 09:55:06查看全文 >>

word文档一打开有下划线怎么去掉(word文档打字出现下划线怎么去掉)

word文档一打开有下划线怎么去掉(word文档打字出现下划线怎么去掉)

品牌型号:联想ThinkPad E14系统:Windows 10家庭版软件版本:Microsoft 365word下划线...

2023-04-30 09:40:02查看全文 >>

打开网页自动播放视频怎么关闭(手机怎样关闭网页视频自动播放)

打开网页自动播放视频怎么关闭(手机怎样关闭网页视频自动播放)

臃肿的微信也可以变得更有条理一些超过 10 亿人日活的微信日益成为我们维系社交关系的必需品,通讯录里动辄有几百个好友。人...

2023-04-30 09:45:54查看全文 >>

如何网页视频自动播放(怎么把网页视频设置成自动播放)

如何网页视频自动播放(怎么把网页视频设置成自动播放)

可能是出于节省用户流量,许多移动端浏览器都不支持H5自动播放视频,必须在用户主动交互(点击或者滑动等)后才可以通过js播...

2023-04-30 09:43:22查看全文 >>

怎么关闭网页自动播放(如何将网页设置成自动播放)

怎么关闭网页自动播放(如何将网页设置成自动播放)

IT之家 4 月 6 日消息,根据国外科技媒体 NeoWin 报道,微软 Edge 浏览器重新回归了一键阻止视频自动播放...

2023-04-30 09:23:11查看全文 >>

电脑网页视频自动播放怎么关闭(怎么让电脑网页自动播放视频)

电脑网页视频自动播放怎么关闭(怎么让电脑网页自动播放视频)

很多朋友还是喜欢通过电脑浏览器逛贴吧,比如我自己也是。会发现遇到视频贴子的时候它自动播放,有的声音还比较带感,冷不丁还吓...

2023-04-30 10:09:50查看全文 >>

如何不让网页自动播放视频(怎样关闭网页上视频自动播放)

如何不让网页自动播放视频(怎样关闭网页上视频自动播放)

IT之家 7 月 25 日消息 据外媒 ghacks.net 消息,微软 Edge 92 正式版浏览器发布后,将默认禁止...

2023-04-30 09:25:16查看全文 >>

文档排行