如何使用原生js控制video和audio的播放暂停切换

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!