您的位置：首页 > Web前端 > HTML5

html5视频播放器

2016-01-09 17:38 1061 查看

html5 视频音频***

学习的笔记，记录备忘。

效果图：

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name = "viewport" content="width=device-width,inital-scale=1,user-scalable=no"></meta>
		<title>视频播放器</title>
		<style>
			.video_box{float: left;}
			.audio_box{float: left;margin-left: 160px;}
		</style>
	</head>
	<body>
		<section class="video_box">
			<video controls="controls" poster="img/1.png">
				<!--若浏览器识别第一个视频格式则忽略后面-->
				<source src="video/iceage4.mp4" type="video/mp4"></source>
				<source src="video/iceage4.webm" type="video/webm"></source>
			</video>
			<hgroup>
				<h2>视频播放器</h2>
				<h3>video标签属性</h3>
			</hgroup>
			<article>
				<p>①controls ：播放组件</p>
				<p>②poster ：视频缺省图片</p>
				<p>③autoplay ：加载后播放</p>
				<p>④source ：视频播放来源</p>
				<p>⑤width height : 视频宽高</p>
				<p>⑥更多内容参考w3c</p>
			</article>
		</section>
		<section class="audio_box">
			<audio controls="controls">
				<source src="video/fcml.mp3" type="audio/mp3"></source>
				<source src="video/fcml.wav" type="audio/vnd.wave"></source>
			</audio>
			<hgroup>
				<h2>音频播放器</h2>
				<h3>audio标签属性</h3>
			</hgroup>
			<article>
				<p>①和video相似</p>
			</article>
		</section>
	</body>
</html>

这是在其他网站上看到的，直接copy了。

video标签属性

属性	值	描述
autoplay	autoplay	如果出现该属性，则视频在就绪后马上播放。
controls	controls	如果出现该属性，则向用户显示控件，比如播放按钮。
height , width	pixels	设置视频播放器的高度/宽度。
loop	loop	如果出现该属性，则当媒介文件完成播放后再次开始播放。
preload	preload	如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。
poster	图片地址	置显示默认图片，而不是视频的第一帧。
src	url	要播放的视频的 URL。

videoAPI方法

方法	描述
addTextTrack()	向音频/视频添加新的文本轨道(没有浏览器支持)
canPlayType()	检测浏览器是否能播放指定的音频/视频类型
load()	重新加载音频/视频元素
play()	开始播放音频/视频
requestFullscreen()	全屏。 webkit内核:webkitRequestFullScreen() moz内核:mozRequestFullScreen()
document.exitFullscreen	退出全屏。 webkit内核:webkitCancelFullScreen() moz内核:mozCancelFullScreen()
pause()	暂停当前播放的音频

属性
描述

audioTracks 返回表示可用音轨的 AudioTrackList 对象

autoplay 设置或返回是否在加载完成后随即播放音频/视频

buffered 返回表示音频/视频已缓冲部分的 TimeRanges 对象

controller 返回表示音频/视频当前媒体控制器的 MediaController 对象

controls 设置或返回音频/视频是否显示控件（比如播放/暂停等）

crossOrigin 设置或返回音频/视频的 CORS 设置

currentSrc 返回当前音频/视频的 URL

currentTime 设置或返回音频/视频中的当前播放位置（以秒计）

defaultMuted 设置或返回音频/视频默认是否静音

defaultPlaybackRate 设置或返回音频/视频的默认播放速度

duration 返回当前音频/视频的长度（以秒计）

ended 返回音频/视频的播放是否已结束

error 返回表示音频/视频错误状态的 MediaError 对象

loop 设置或返回音频/视频是否应在结束时重新播放

mediaGroup 设置或返回音频/视频所属的组合（用于连接多个音频/视频元素）

muted 设置或返回音频/视频是否静音

networkState 返回音频/视频的当前网络状态

paused 设置或返回音频/视频是否暂停

playbackRate 设置或返回音频/视频播放的速度

played 返回表示音频/视频已播放部分的 TimeRanges 对象

preload 设置或返回音频/视频是否应该在页面加载后进行加载

readyState 返回音频/视频当前的就绪状态

seekable 返回表示音频/视频可寻址部分的 TimeRanges 对象

volume 声音的大小

seeking 返回用户是否正在音频/视频中进行查找

事件
描述

abort 当音频/视频的加载已放弃时

canplay 当浏览器可以播放音频/视频时

canplaythrough 当浏览器可在不因缓冲而停顿的情况下进行播放时

durationchange 当音频/视频的时长已更改时

emptied 当目前的播放列表为空时

ended 当目前的播放列表已结束时

error 当在音频/视频加载期间发生错误时

loadeddata 当浏览器已加载音频/视频的当前帧时

loadedmetadata 当浏览器已加载音频/视频的元数据时

loadstart 当浏览器开始查找音频/视频时

pause 当音频/视频已暂停时

play 当音频/视频已开始或不再暂停时

playing 当音频/视频在已因缓冲而暂停或停止后已就绪时

progress 当浏览器正在下载音频/视频时

ratechange 当音频/视频的播放速度已更改时

seeked 当用户已移动/跳跃到音频/视频中的新位置时

seeking 当用户开始移动/跳跃到音频/视频中的新位置时

stalled 当浏览器尝试获取媒体数据，但数据不可用时

suspend 当浏览器刻意不获取媒体数据时

timeupdate 当目前的播放位置已更改时

volumechange 当音量已更改时

waiting 当视频由于需要缓冲下一帧而停止

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航