HTML5 #音频视频 #canvas #window #webworkers #拖放

一.音频视频

视频

(1)视频标签：
    a).<video src="视频文件URL地址/" width="宽度" height="高度"></video>
    b).<video width="宽度" height="高度">   <!--写在标签里的如果不支持就会找到支持的格式-->
		   <soure src="视频文件URL地址.mp4/"></soure>
		   <soure src="视频文件URL地址.ts/"></soure>
		   ...
	   </video>

(2)视频属性：
	controls   控制是否显示视频空间(播放,暂停,音量)            布尔值属性
	autoplay   控制视频是否自动播放(与muted属性结合)           布尔值属性
	muted      控制视频在播放时是否静音                        布尔值属性
	loop       控制视频是否循环播放                            布尔值属性
	poster     设置视频的海报帧的URL地址                       字符串类型
	preload    设置视频的预载入方式：a).auto:尽可能缓存视频文件 b).metadata:缓存视频的总时长,宽,高,原始数据  c).none 不进行缓存
	                                 

音频

(1)音频标签：
	a).<audio src="音频文件URL地址"></audio>
	b).<audio>
		  <source src="音频文件URL地址"/>
		  ...
	   </audio>

(2)音频属性：
	controls   控制是否显示音频控件(播放、暂停、音量等)       布尔值属性
	autoplay   控制音频是否自动播放(必须与muted属性组合)		 布尔值属性
    muted      控制音频在播放时是否静音                       布尔值属性
	loop       控制音频是否循环播放                           布尔值属性
    preload    设置音频的预载入方式：a)auto:尽可能的缓存音频文件  b)metadata:只缓存音频的总时长,宽,高原始数据  c)none:不进行缓存

上面的写在标签里的,下面的写在的JS脚本里

HTML Video Element API

提供了操作视频对象的属性和方法：

controls  -获取/设置是否显示视频的播放控件
var iable = HTMLVideoElement.controls  //获取
HTMLVideoElement.controls = boolean	   //设置

autoplay  -是否自动播放
var iable = HTMLVideoElement.autoplay  //获取
HTMLVideoElement.autoplay = boolean    //设置

muted   -是否静音播放
var iable = HTMLVideoElement.autoplay  //获取
HTMLVideoElement.autoplay = boolean    //设置

loop	-获取/设置视频是否循环播放控件
var iable = HTMLVideoElement.loop     //获取
HTMLVideoElement.loop = boolean		  //设置

poster  --获取/设置视频的海报帧的URL地址
var iable = HTMLVideoElement.poster  //获取
HTMLVideoElement.poster = string      //设置

preload  --获取/设置视频的预加载方式
var iable = HTMLVideoElement.preload  //获取
HTMLVideoElement.preload = string(auto|metadata|none)   //设置

width   --获取/设置视频的宽度
var iable = HTMLVideoElement.width   //获取
HTMLVideoElement.width  = integer    //设置  (数字,字符串都可以,但是字符串一定要是数字)

//注意：通过width属性获取视频对象的宽度,必须保证HTML标签上存在width属性才可以

height   --获取/设置视频的高度
var iable = HTMLVideoElement.height   //获取
HTMLVideoElement.height  = integer    //设置  (数字,字符串都可以,但是字符串一定要是数字)

//注意：通过width属性获取视频对象的宽度,必须保证HTML标签上存在height属性才可以

src   --获取/设置URL地址
var iable = HTMLVideoElement.src    //获取
HTMLVideoElement.src  = string      //设置

//示例：
<video id="AD" src="doyouwantmore.mp3" controls></video>
<button onclick="doyou('do