HTML5新API——音频

最新推荐文章于 2024-08-16 10:59:26 发布

IfIloseyou

最新推荐文章于 2024-08-16 10:59:26 发布

阅读量252

点赞数

本文链接：https://blog.csdn.net/IfIloseyou/article/details/105483724

版权

本文详细介绍了HTML5中用于音频处理的新API，包括video和audio元素的属性、方法和事件，如autoplay、controls、currentTime、duration等，并讨论了如何自定义播放控件以及如何实现自动播放的背景音乐功能。

摘要由CSDN通过智能技术生成

面试题： Flash被HTML5取代在哪些方面？
音频和视频 video aduio
绘图 canvas
动画 canvas + 定时器
系统图表 canvas svg
客户端数据存储 webStorage

<video> 标签定义视频，比如电影片段或其他视频流。

video元素/对象的属性:

(1)src:指定要播放的资源的路径

(2)autoplay:false,是否自动播放

(3)controls:false,是否显示播放控件.提示:不同浏览器的播放控件外观不同

(4)currentTime:0,当前播放的时间点(s)

(5)duration:60,影片总时长(s)

(6)ended:false,是否播放到结尾

(7)loop:false,是否循环播放

(8)muted:false,是否静音

(9)volumn:音量设置(0-1),对象属性,不用于标签

(10)paused:false,当前是否处于暂停

(11)poster:’’,指定视频第一帧播放前的电影海报

(12)preload:指定视频预加载方案,可取值

    auto:默认值,自动预加载视频的宽高,时长,第一帧内容,并缓冲了一定的时长

    metadata:元数据,只预加载视频的宽高,时长,第一帧内容

    none:不预加载任何内容

video对象的方法;

play():开始播放

pause():暂停播放

video对象的事件:

onplay:视频开始播放(可能多种原因引起)

onpause:视频开始暂停(可能多种原因引起)

不使用video默认的播放控件,使用自定义的按钮,控制视频的播放和暂停

<div class="video_play" id="video_div">
		<video src="res/火箭少女101 - 卡路里 - 《西虹市首富》电影插曲.mkv"></video>
		<div class="menu" id="control_div">
			<div class="play" id="play">播放</div>
			<div class="time" id="time">0:00/0:00</div>
			<div class="progressbar" id="progressbar">
				<div class="progressbar_color" id="progressbar_color"></div>
				<i class="yuan" id="yuan"></i>
			</div>
			<div class="quick" id="quick">倍数</div>
			<div class="quick_list" id="quick_list">
				<ul>
					<li>正常</li>
					<li>X1.25</li>
					<li>X1.5</li>
					<li>X2</li>
				</ul>
			</div>
			<div class="voladd" id="voladd">音量+</div>
			<div class="volIns" id="volIns">音量-</div>
			<div class="fullscreen" id="fullscreen">全屏</div>
		</div>
	</div>
	<script>
		//获取最大的盒子
		var video_div = document.getElementById('video_div');
		//获取控件盒子
		var control_div = document.getElementById('control_div');
		//获取video
		var video_display = document.getElementsByTagName('video'