文档章节

HTML5多媒体播放知识点总结

梦前端
 梦前端
发布于 2016/05/16 23:37
字数 775
阅读 52
收藏 0

一.属性

1.src:多媒体数据的URL地址

2..autoplay:自动播放

3.preload:预加载

4.poster(video独有的属性):指的是当视频不可用时,给用户展示的图片

5..loop:循环播放

6..controls:播放器的控制条

7..width和height( video独有的属性 ):video元素的长宽

8.error:播放出现错误的状态,具体状态参考手册

9.networkState:数据加载过程中读取当前的网络状态,具体状态参考手册

10..currentSrc :读取播放媒体数据的URL地址

11..buffered:

12.readyState:当前播放位置的就绪状态

13..seeking,seekable

14..currentTime:媒体当前播放的位置,startTime:播放的开始时间,duration:媒体播放的总时间

15..played,paused:是否暂停播放,ended:播放是否完毕

16..defaultPlaybackRate :修改和读取播放速率, playbackRate :修改和读取媒体当前的播放速率

17.volume:读取和修改媒体的音量,1表示最大音量,0表示静音。muted:true表示静音状态,false表示不静音状态。运用它时应更改它的状态,就像开关一样,每次都是我们自己开关。

二.方法

1.play()

2.pause()

3.load()

4.canPlayType()

三.事件

1.eventTester("loadstart"); //客户端开始请求数据

2. eventTester("progress"); //客户端正在请求数据

3. eventTester("suspend"); //延迟下载

4. eventTester("abort"); //客户端主动终止下载(不是因为错误引起),

5.eventTester("error"); //请求数据时遇到错误

6. eventTester("stalled"); //网速失速

7. eventTester("play"); //play()和autoplay开始播放时触发

8. eventTester("pause"); //pause()触发

9. eventTester("loadedmetadata"); //成功获取资源长度

10. eventTester("loadeddata"); //

11.eventTester("waiting"); //等待数据,并非错误

12.eventTester("playing"); //开始回放

13. eventTester("canplay"); //可以播放,但中途可能因为加载而暂停

14.eventTester("canplaythrough"); //可以播放,歌曲全部加载完毕

15.eventTester("seeking"); //寻找中

16.eventTester("seeked"); //寻找完毕

17.eventTester("timeupdate"); //播放时间改变

18.eventTester("ended"); //播放结束

19.eventTester("ratechange"); //播放速率改变

20.eventTester("durationchange"); //资源长度改变

21.eventTester("volumechange"); //音量改变

四.自制视频播放器

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>自制的视频播放器</title>
<script>
window.onload = function(){
	var aV = document.getElementById('video');
	var aInput = document.getElementsByTagName('input');
	var aSpan = document.getElementsByTagName('span')[0];
	
	aInput[0].onclick = function(){
		if(aV.paused){
			aV.play();
			aInput[0].value = '暂停';
		}else{
			aV.pause();
			this.value = '播放';
		}
	};
	aInput[1].onclick = function(){
		if(!aV.muted){
			aV.volume = 0;
			this.value = '放音';
			aV.muted = true;
		}else{
			aV.volume = 1;
			this.value = '静音';
			aV.muted = false;
		}
	};
	aInput[2].onOff = true;
	aInput[2].onclick = function(){
		if(this.onOff){
			aV.style.width = document.documentElement.clientWidth + 'px';
			aV.style.height = document.documentElement.clientHeight+ 'px';	
			this.onOff = false;
			this.value = '退出全屏';
		}else{
			aV.style.width = 400 + 'px';
			aV.style.height = 300 + 'px';
			this.onOff = true;
			this.value = '全屏';
		}
	}; 
	aV.addEventListener('playing',function(){
		aV.timer= setInterval(function(){
		if(Math.floor(aV.currentTime) + 1 == Math.floor(aV.duration)){
			clearInterval(aV.timer);
			aInput[0].value = '播放';
		}
		aSpan.innerHTML= Math.floor(aV.currentTime) + '/'+ Math.floor(aV.duration);
	},1000);
	},false);
	aV.addEventListener('pause',function(){
		clearInterval(aV.timer);
	},false);
};
</script>
<style>
video{border:1px solid #000;}
</style>
</head>

<body>
<video  poster='1.gif' width="400px" height='300px' id='video'>
<source src='Intermission-Walk-in_512kb.mp4'></source>
<source src='Intermission-Walk-in.ogv'></source>
</video>
<br/>
<input type='button' value='播放' />
<input type='button' value='静音' />
<input type='button' value='全屏' />
<span>/</span>
</body>
</html>

 

© 著作权归作者所有

梦前端
粉丝 0
博文 14
码字总数 7624
作品 0
马鞍山
程序员
私信 提问
HTML5拍照、摄像机功能实战

苏格团队 作者:Tomey 开篇 最近在做一个chrome app的云相机应用,应用包括拍照、摄像、保存照片视频、上传文件等等核心功能,其中涉及到很多HTML5对媒体流相关的API。写这篇文章的目的,其一...

苏格团队
01/24
0
0
Flash与HTML5性能比较

近日,一项评测向人们证明了:HTML5 在性能上仍远远落后于Flashplayer。测试使用了Droid X, Nexus One, Desire HD, Atrix, PlayBook, Galaxy Tab, Xoom 等设备,分别测试了位图,矢量图,数值...

小卒过河
2011/06/15
6.5K
12
HTML5与Flash在移动设备上的性能比较

GUIMark3评测向人们证明了:HTML5在性能上仍远远落后于Flash Player。测试使用了Droid X, Nexus One, Desire HD, Atrix, PlayBook, Galaxy Tab, Xoom 等设备,分别测试了位图,矢量图,数值运...

小卒过河
2011/07/04
1K
12
网页音频播放器和视频播放器插件收藏

为了能够使网页展示内容更丰富,音频播放器和视频播放器是必不可少的,这里推荐几款。 10个基于Web的HTML5音乐播放器 15个最好的HTML5视频播放器 介绍当前流行的一些开源flash视频播放器 五个...

小微
2012/04/06
2.5K
0
HTML5(目前)无法帮你实现的五件事

一直以来,很多人都专注于HTML5能够实现什么(或者是如何将各种方法连接起来,实现一个更加优雅的解决方案)。而现在,也不少人想将目光投向那些HTML5无法实现的事情。MSDN上微软员工thebeeb...

虫虫
2011/12/12
3.9K
22

没有更多内容

加载失败,请刷新页面

加载更多

mysql概览

学习知识,首先要有一个总体的认识。以下为mysql概览 1-架构图 2-Detail csdn |简书 | 头条 | SegmentFault 思否 | 掘金 | 开源中国 |

程序员深夜写bug
今天
8
0
golang微服务框架go-micro 入门笔记2.2 micro工具之微应用利器micro web

micro web micro 功能非常强大,本文将详细阐述micro web 命令行的功能 阅读本文前你可能需要进行如下知识储备 golang分布式微服务框架go-micro 入门笔记1:搭建go-micro环境, golang微服务框架...

非正式解决方案
今天
6
0
前端——使用base64编码在页面嵌入图片

因为页面中插入一个图片都要写明图片的路径——相对路径或者绝对路径。而除了具体的网站图片的图片地址,如果是在自己电脑文件夹里的图片,当我们的HTML文件在别人电脑上打开的时候图片则由于...

被毒打的程序猿
今天
8
0
Flutter 系列之Dart语言概述

Dart语言与其他语言究竟有什么不同呢?在已有的编程语言经验的基础上,我们该如何快速上手呢?本篇文章从编程语言中最重要的组成部分,也就是基础语法与类型变量出发,一起来学习Dart吧 一、...

過愙
今天
5
0
rime设置为默认简体

转载 https://github.com/ModerRAS/ModerRAS.github.io/blob/master/_posts/2018-11-07-rime%E8%AE%BE%E7%BD%AE%E4%B8%BA%E9%BB%98%E8%AE%A4%E7%AE%80%E4%BD%93.md 写在开始 我的Arch Linux上......

zhenruyan
今天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部