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/ 更多干货等你来拿