H5视频和背景音乐

H5里的视频和背景音乐

<video></video> 视频标签属性src

play() 开始播放

pause() 暂停播放

autoplay:自动播放注意这里被浏览器禁用了除静音才能会自动播放这里我去查了一下浏览器的解释，浏览器的意思是怕突然很大声吓到人或者制造噪音

muted 设置静音

controls 默认控件浏览器每个浏览器的控件样式都不一样

loop 是否循环播放

poster 视频播放前的预览图片谷歌中一闪而过广告

ended 是否播放到结束

paused 当前是否处于暂停状态

currentTime 播放到的当前时间

duration 影片的总时长

下面写给小案例来运用以上属性

<body>
    <div class="div1">
        <video src="1.mp4" class="dy"></video>
        <img src="img/1.jpg" class="img2">
        <div class="div5">
            <img class="img1" src="img/play02.png">
            <div class="bar">
                <div class="circle"></div>
                <button class="nam">全屏</button >
            </div>
        </div>
    </div>
   
    <script>
        var dy = document.getElementsByClassName("dy")[0];
        var img1 = document.getElementsByClassName("img1")[0];
        var img2 = document.getElementsByClassName("img2")[0];
        var div1 = document.getElementsByClassName("div1")[0];
        var div5 = document.getElementsByClassName("div5")[0];
        var circle = document.getElementsByClassName("circle")[0];
        var bar = document.getElementsByClassName("bar")[0];
        var nam = document.getElementsByClassName("nam")[0];

        //自己写的进度条
        setInterval(function fun() {
            var a = parseFloat(dy.currentTime / dy.duration);
            circle.style.width = (a * 100) + "%";
        }, 100);

        nam.onclick = function(){
            // 是否全屏
            if (dy.requestFullscreen) {
                dy.requestFullscreen();
            }
        };

        img1.onclick = function() {
            //当前是否属于暂停状态
            if (dy.paused) {
                dy.play();
                img1.src = "img/play02.png"
                img2.style.display = "none"
            } else {
                dy.pause()
                img1.src = "img/pause02.png"
                img2.style.display = "block"
            }
        }

        dy.onclick = function() {
                 //当前是否属于暂停状态
            if (dy.paused) {
                img1.style.display = "block";
                img1.src = "img/play02.png"
                img2.style.display = "none"
                dy.play();
            } else {
                img1.src = "img/pause02.png"
                img2.style.display = "block"
                dy.pause();
            }
        }

        div1.onmouseout = function() {
            div5.style.display = "none";
        }

        div1.onmouseover = function() {
            div5.style.display = "block"
        }
    </script>
</body>

背景音乐　

<audio></audio> 音乐标签属性src

背景音乐和视频一样只是标签不同用法都一样

下面也写给小案例来用以上学习的属性

<body>
    时长
    <div class="yi">
        <div class="div">
            <span class="tuo"></span>
        </div>
        <audio class="num" src="1.mp3"></audio> 播放/暂停
        <input class="play" type="checkbox"> 上一曲 <input class="Last " type="checkbox"> 下一曲 <input class="lower" type="checkbox">
    </div>

    <script>
        var play = document.getElementsByClassName("play")[0];
        var num = document.getElementsByClassName("num")[0];
        var div = document.getElementsByClassName("div")[0];
        var tuo = document.getElementsByClassName("tuo")[0];

        //根据歌曲长度来设置
        var b = num.duration;
        div.style.width = b + "px"

        //定时器
        //进度条
        setInterval(function fun() {
            //将音乐总长度除播放的长度获取剩下的长度
            // 用变量a来存储
            var a = (num.currentTime / num.duration);
            // 在用a改变播放进度的span width的值就是进度条的进度
            tuo.style.width = (a * 100) + "%"
        }, 100)



        play.onclick = function() {
            if (num.paused) {
                num.play()
            } else {
                num.pause()
            }
        }
    </script>
</body>

其实视频和背景音乐还是蛮简单的

试试就懂了没什么难度

H5视频和背景音乐

猜你喜欢