1. video 给按钮添加点击事件 如果想通过controls来控制也可以调用H5C3中视频的方法
1.1 html代码
<div style="text-align:center;">
<button id="btn">播放/暂停</button>
<br />
<video id="video" width="400" style="margin-top:20px;">
<source src="./img/movie01.mp4" type="video/mp4" />
</video>
</div>
1.2 JS代码
<script type="text/javascript">
var video = document.getElementById("video");
btn.onclick = function () {
// paused是H5C3中视频里的属性,值为布尔,true代表指示音频/视频已暂停,否则为false.
// 下面的play()和pause()也是H5C3中的方法
if (video.paused) {
video.play();
} else
video.pause();
}
</script>
2. audio 其实操作都是一样的 这个给大家写一个小功能 类似效果像我们平常在手机里播放音乐的时候,当音乐开始,CD会开始旋转,再点击,CD就在当前的位置停止旋转.
2.1样式
<style>
img{
display: block;
border-radius: 50%;
margin:50px auto;
}
audio{
display: block;
margin:50px auto;
}
/* 写一个动画剧本来旋转 */
@keyframes autoRotate{
from{}
to{
transform: rotateZ(360deg)
}
}
/* 通过添加下面这两个类 控制 */
.rotate{
animation:autoRotate 100s infinite linear;
}
.pause{
animation-play-state: paused;
}
</style>
2.2 html代码
<!-- 图片代表音乐专辑封面-->
<img src='img/music.jpg' alt="" class="pic">
<audio controls src="1.mp3" autoplay></audio>
2.3 js代码
<script>
var audio=document.querySelector('audio');
var pic=document.querySelector('.pic');
audio.onplay=function(){
//移除
pic.classList.remove('pause');
//添加一个旋转的动画
pic.classList.add('rotate');
}
audio.onpause=function(){
// 这样写会出现闪退到最开始的位置 而不是当前位置
// document.querySelector('.pic').classList.remove('rotate')
pic.classList.add('pause');
}
</script>
在上面中一些用到的方法 参考http://www.w3school.com.cn/html5/html_5_video_dom.asp
以后我会经常来写博客分享 乐于技术交流 不足之处欢迎指教 第一篇 继续fighting!