HTML--video中的自动播放autoplay以及循环播放loop+更多多媒体标签

问题:视频设置自动播放,页面加载完成时正常播放,但刷新页面后不播放,循环播放失效。

自动播放以及循环播放的代码

<video muted autoplay="autoplay" loop="loop">
	<source src="image/01.mp4" type="video/mp4"></source>
</video>
<!--muted:静音播放  注:高版本浏览器对视频静音后可以保证视频自动播放-->
<!--autoplay:自动播放-->
<!--loop:循环播放-->

source

  • 为媒介元素(如 video 和 audio)定义媒介资源
  • 允许规定可替换的视频/音频文件供浏览器根据它对媒体类型或编解码器的支持进行选择(可实现让媒体元素在不同浏览器下都支持播放)
  • 是HTML5中的新标签

muted

  • 属性是一个boolean(布尔)属性
  • 设置或返回音频/视频是否应该被静音(关闭声音)

video

  • 用来定义视频,比如电影片段或者其他视频流
  • HTML5中的新标签
  • 可以在开始标签和结束标签之间放置文本内容,这样老版本浏览器可以显示出信息
  • 属性
属性 描述
autoplay autoplay 如果出现该属性,则视频在就绪后马上播放
controls controls 如果出现该属性,则向用户显示控件,比如播放按钮
height pixels 如果设置视频播放器的高度
loop loop 如果出现该属性,则当媒介文件完成播放后再次开始播放
muted muted 规定视频的音频输出应该被静音
poster url 规定视频下载时显示的图像,或者用户点击播放按钮前显示的图像
preload preload 如果出现该属性,则视频在页面加载时进行加载,并预备播放。如果使用autoplay则忽略该属性
src url 要播放的视频的url
width pixels 设置视频播放器的宽度

更多多媒体标签

embed

  • 标签定义嵌入的内容,比如插件
  • 可以用来插入各种多媒体,格式可以是Midi、Wav、AIFF、AU、MP3等等。url为音频或视频文件及其路径,可以是相对路径或绝对路径。
  • HTML5中新标签
  • 不同的浏览器对音频格式的支持也不同

audio

  • 音频播放
  • HTML5新标签

猜你喜欢

转载自blog.csdn.net/weixin_45406850/article/details/122979107
今日推荐