HTML5的媒体元素及iframe框架的使用

Posted 2022-10-15 huazhiling

video元素的基本语法

<video src="../Ajax+加载单一信息.mp4" width="1000" height="500" controls>您的浏览器不支持video标签</video>

1. src属性指定要播放的视频文件路径
2. controls属性用于提供播放、暂停、和音量控件，width和height设置视频的宽高

<!--video元素的应用-->

<video controls autoplay>
	<source src="../SpringMVC.mp4"/>
	<source src="../SpringMVC.webm" />
	您的浏览器不支持video标签
</video>

1. 使用source元素来链接到不同的视频文件，浏览器会自动选择第一个可以识别的格式
2. 设置autoplay属性后，不需要与用户进行任何交互，就可以让视频文件加载完成后自动播放，目前被禁用
3. 设置muted属性后，会自动播放，处于静音状态

audio元素的基本语法

<audio src="雨宗林 - 别把疼你的人弄丢了.mp4" controls >您的浏览器不支持audio标签</audio>

<!--audio元素的应用-->

<audio controls >
	<source src="雨宗林 - 别把疼你的人弄丢了.mp4">
	<source src="雨宗林 - 别把疼你的人弄丢了.ogg">
        您的浏览器不支持audio标签
</audio>

　　　

<iframe>的语法

	<iframe name="myiframe" src="http://www.baidu.com" width="1500px" height="236px"></iframe>
	<a href="https://www.jd.com" target="myiframe">京东</a>

1. 在被打开的框架上加name属性
2. 在超链接上设置target目标窗口属性为希望显示的框架窗口名