html5视频播放器

最新推荐文章于 2021-06-22 18:32:39 发布

ITDragon龙

最新推荐文章于 2021-06-22 18:32:39 发布

阅读量4.7k

点赞数 1

分类专栏： html5 前端技术文章标签： html5 video

本文链接：https://blog.csdn.net/qq_19558705/article/details/50488806

版权

前端技术同时被 2 个专栏收录

20 篇文章 13 订阅

订阅专栏

html5

13 篇文章 0 订阅

订阅专栏

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 当视频由于需要缓冲下一帧而停止

个人主页：http://www.itit123.cn/ 更多干货等你来拿

ITDragon龙

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
html5视频播放器

html5 视频音频制作学习的笔记，记录备忘。效果图：代码：视频播放器 .video_box{float: left;} .audio_box{float: left;margin-left: 160px;} 视频播放器 video标签
复制链接

扫一扫

专栏目录