H5多媒体

H5操作节点类名

补充(获取元素新方法)

注意：只针对于节点上面有id名的元素

获取元素有两种方式

1.通过document.getElementById('box')方式获取元素(如下)

//通过document方式获取id
var oBox = document.getElementById('box');
console.log(oBox)

2.如果在HTML标签上面有id名的话，那么就可以直接调用该元素

通过: 如果在HTML标签里面id的名字是box的话，那么在JS里面就可以直接的使用HTML标签里面的id名字了，不用获取元素 (如下)

<div id="box"></div>
<script>
	console.log(box) //当你这个元素是通过id来取的名字在JS就可以直接使用到他
</script>

前言

H5提供了操作节点类名的若干方法

在es5中的DOM的时候我们需要操作他的元素类名来实现元素样式的改变

通过JS是可以改变元素的类名的，就是改变元素的css样式

基础知识

这些方法通过classList操控类名都是原生JS的方法

1. dom.classList  存放的是 dom节点的类名集合

2. dom.classList.add(类名)      给dom添加指定类名

3. dom.classList.remove(类名)   去除dom的指定类名

4. dom.classList.toggle(类名)   切换dom的指定类名

5. dom.classList.contains(类名) 判断dom有没有包含指定类名

如何获取一个元素上面的类名集合

console.log(oBox.classList);
//他前是一个类数组，一个节点上面的classList属性他是一个类数组
//当前这个数组存储了你的类名的集合

注意：前提都是DOM节点上面的类名列表对象上面的方法  

如何给一个元素添加类名

//在当前元素上添加类型
add.onclick = function(){
	oBox.classList.add('on');
}

如何给一个元素去掉指定类名

//在当前元素上去掉类名
remove.onclick = function(){
	oBox.classList.remove('on');
}

 如何判断当前元素有没有指定类名

//判断当前元素有没有指定类名
contains.onclick = function(){
	alert(oBox.classList.contains('on'));
}

如何切换指定类名

//切换指定的类名
//切换是指  原本有--->没有 原本没有-->有
toggle.onclick = function(){
	oBox.classList.toggle('on');
}

插入视频&&音频

视频及常用属性

前言

1.  video 可以在页面中插入一个视频

2. controls   显示视频的所有控件(这些控件是可以控制视频的一些状态的)

3. autoplay   让视频自动播放(高版本浏览器加上这个属性也是不能自动播放的)

4. 高版本浏览器需要加上muted属性能让视频自动播放并且静音

5. poster       给视频添加海报(广告)

6. loop         让视频循环播放

<!-- video标签可以在页面中插入一个视频 src表示插入视频的路径 -->
	<video src="video/1.mp4" 
		   width="500" 
		   controls
		   autoplay
		   muted
		   poster="1.png"
		   loop
        ></video>
<!-- video设置了width值没有设置height那么他的高度会等比例缩放的(不用管高度) -->

音频及常用属性

前言

1. 音频的格式是mp3 视频的格式是mp4

2. audio 可以在页面中插入一个音频 

3. 音频在页面显示默认不可见，必须加上controls属性才可见

在页面上插入音频默认样式如下

audio:not([controls]) {   user agent stylesheet
    display: none !important;
}

user agent stylesheet 表示用户代理样式表(浏览器默认的样式表)

audio:not([controls])  表示出了没有controls属性的audio标签  （not选择器表示除了 [controls]是属性选择器）

audio:not([controls]) {//除了没有controls属性的audio标签
	display: none !important;
}
表示选择到audio标签并且没有controls这个属性的表示的样式的是display:none 
用!important吧这个权限提上到最高

插入音频

<!-- audio音频标签 src表示音频标签的音频的路径 -->
<audio src="./audio/1.mp3" controls loop></audio>

注意

视频(video)和音频(audio)标签上面的属性完全一致

视频&&音频(方法和属性)

方法

前言

H5这套规范有提供了许多的API来操控音频视频

在别的浏览器上面的视频/音频控件都是不一样的(不统一)

我们是有必要，统一在不同浏览器上面的控件样式

基础知识

视频/音频上的方法

1. play   播放视频/音频
2. pause   暂停视频/音频
3. load  重新加载视频/音频

点击按钮，用play方法让视频播放

//点击btn01按钮让视频播放
btn01.onclick = function(){
	video.play();//play让视频播放
}

点击按钮，用pause方法让视频暂停

//点击btn02按钮让视频暂停
btn02.onclick = function(){
	video.pause();//pause让视频暂停
}

点击按钮，用load方法重载视频

//点击btn03按钮让视频从新加载
btn03.onclick = function(){
	video.load();//load重载视频
}

属性

基础知识

视频/音频上的属性

1. duration  获取视频/音频的总时间
2. currentTime  获取视频/音频播放的当前时间
3. ended  当前视频/音频是否播放完成
4. playbackRate  获取视频/音频的播放速度 默认1s
5. volume  获取视频/音频播放的当前音量

用duration属性获取视频/音频的周期

//duration表示当前这个视频播放时间有多长(以秒为单位)
console.log(video.duration)//获取视频的周期 当前的视频分钟换算成秒 = 当前视频的周期

 用currentTime属性获取/设置视频的播放时间

//video.currentTime表示获取这个视频当前播放的时间(以秒为单位)
console.log(video.currentTime);//查询当时视频的播放时间
video.currentTime = 200;//设置当前视频播放的时间(先让这个视频播放过)

用playbackRate属性获取/设置视频的播放速度 

//playbackRate表示设置视频的播放速度(默认情况下视频是1秒钟播放一次)
console.log(video.playbackRate)//查询当前播放的速度
video.playbackRate = 10;//设置当前的播放速度

 用volume属性获取视频/音频播放的当前音量

// volume表示设置当前视频的音量的播放速度(默认情况下是1表示当前音量是100%)
console.log(video.volume);//获取当前视频的音量
video.volume = 0.1;//设置当前视频的音量
// 0.1表示中音量的10%

用ended属性得出当前视频/音频是否播放完成 

//ended表示当前视频是否播放完毕
console.log(video.ended)//true表示播放完毕 false表示没有播放完毕

 视频&&音频事件

前言

视频或者是音频是一个需要加载的资源等你加载请求完毕就可以使用了这个视频或者是音频了

基础知识

视频/音频上的事件

1. oncanplay        当可以播放视频/音频时触发
2. ontimeupdate  当视频/音频的播放时间改变时触发
3. onended  当视频/音频播放结束时触发
4. onplay   当视频/音频的状态由暂停到播放状态时触发
5. onpause   当视频/音频的状态由播放到暂停状态时触发

oncanplay事件是当视频/音频 加载好会触发回调函数

//当加载(请求资源)好视频可以播放的时候触发oncanplay事件
video.oncanplay = function(){
     console.log('oncanplay事件')
}

onplay事件是视频/音频从暂停切换到播放状态时 会触发

//从视频的暂停状态到视频的播放状态触发onplay事件
video.onplay = function(){
   console.log('onplay事件')
}

onpause事件是音频/视频从播放切换到暂停状态时 会触发 

//从视频的播放状态到视频的暂停状态触发onpause事件
video.onpause = function(){
   console.log('onpause事件')
}

ontimeupdate事件当视频/音频的播放时间变化时 会触发 

//当视频的播放时间发生变换时触发ontimeupdate事件
video.ontimeupdate = function(){
   //每次视频播放时间发生变化时就会打印当前的时间
   console.log(video.currentTime);
}

onended事件当视频/音频播放完成时    会触发 

//当视频播放完成时触发onended事件
video.onended = function(){
  console.log('视频播放完成');
}