5.标签篇:audio和video

# 5.标签篇:audio和video

 

- audio 和 video
```html
<style>
    * {
        margin:0;
        padding:0;
    }
    .video_player{
        position:relative;
        width:1000px;
        height:500px;
        margin:0 auto;
    }
    video{
        position:absolute;
        width:1000px;
        height:500px;
        left:0;
        top:0;
    }
    .menu{
        position:absolute;
        width:100%;
        height:50px;
        background:rgba(0,0,0,.5);
        bottom:0;
        display:none;
    }
    .play{
        position:absolute;
        width:60px;
        height:30px;
        border:1px solid white;
        text-align:center;
        line-height:30px;
        border-radius:10px;
        margin:auto 0 auto 20px;
        top:0;
        bottom:0;
        cursor:pointer;
    }
    .time{
        position:absolute;
        width:100px;
        height:30px;
        text-align:center;
        line-height:30px;
        margin:auto 0 auto 20px;
        top:0;
        bottom:0;
        cursor:pointer;
    }
    .progress_bar{
        position:absolute;
        width:100%;
        height:2px;
        background:gray;
        left:0;
        top:-2px;
    }
    .progress_bar div{
        position:absolute;
        width:0px;
        height:2px;
        background:orange;
        left:0;
        top:0;
    }
    .progress_bar i{
        position:absolute;
        width:6px;
        height:6px;
        background:white;
        border-radius:3px;
        left:120px;
        top:-2px;
    }
    .quick{
        position:absolute;
        width:60px;
        height:30px;
        border:1px solid white;
        text-align:center;
        line-height:30px;
        color:white;
        border-radius:10px;
        margin:auto 0 auto 20px;
        top:0;
        left:800px;
        bottom:0;
        cursor:pointer;
    }
    .quick_list{
        position:absolute;
        width:80px;
        height:120px;
        background:pink;
        left:800px;
        top:-120px;
        color:#fff;
        background-color:rgba(0,0,0,.5);
        display:none;
    }
    .quick_list li{
        position:relative;
        width:100%;
        height:30px;
        text-align:center;
        line-height:30px;
        list-style:none;
        cursor:pointer;
    }
    .quick_list li:hover{
        color:green;
    }
    .vol_add{
        position:absolute;
        width:60px;
        height:30px;
        border:1px solid white;
        text-align:center;
        line-height:30px;
        color:white;
        border-radius:10px;
        margin:auto 0 auto 20px;
        top:0;
        left:500px;
        cursor:pointer;
    }
    .vol_ins{
        position:absolute;
        width:60px;
        height:30px;
        border:1px solid white;
        text-align:center;
        line-height:30px;
        color:white;
        border-radius:10px;
        margin:auto 0 auto 20px;
        top:0;
        left:580px;
        cursor:pointer;
    }
    .full_screen{
        position:absolute;
        width:60px;
        height:30px;
        border:1px solid white;
        text-align:center;
        line-height:30px;
        color:white;
        border-radius:10px;
        margin:auto 0 auto 20px;
        top:0;
        left:880px;
        cursor:pointer;
    }
</style>
<div class="video_player">
    <video src="view.mov"></video>
    <div class="menu">
        <div class="play">播放</div>
        <div class="time">0:00/0:00</div>
        <div class="progress_bar">
            <div></div>
            <i></i>
        </div>
        <div class="quick">倍速</div>
        <div class="quick_list">
            <ul>
                <li>正常</li>
                <li>1.25</li>
                <li>1.5</li>
                <li>2.0</li>
            </ul>
        </div>
        <div class="vol_add">音量加</div>
        <div class="vol_ins">音量减</div>
        <div class="full_screen">全屏</div>
    </div>
</div>
<script>
    var videoPlayer = document.getElementByClassName("video_player")[0];
    var menu = document.getElementByClassName("menu")[0];
    var play = document.getElementByClassName("play")[0];
    var video = document.getElementsByTagName("video")[0];
    var time = document.getElementByClassName("time")[0];
    var progressBar = document.getElementByClassName("progress_bar")[0];
    var quick = document.getElementByClassName("quick")[0];
    var quickList = document.getElementByClassName("quick_list")[0];
    var volAdd = document.getElementByClassName("vol_add")[0];
    var volIns = document.getElementByClassName("vol_ins")[0];
    var fullScreen = document.getElementByClassName("full_screen")[0];
    
    videoPlayer.onmouseenter = function(){
        menu.style.display = "block";
    };
    videoPlayer.onmouseleave = function(){
        menu.style.display = "none";
    };
    play.onclick = function(){//视频播放与暂停
        if(video.paused){//视频处于暂停状态
            video.play();//视频播放
            play.innerHTML = "暂停";
        }else{
            video.pause();//视频暂停
            play.innerHTML = "播放";
        }
    };

 

    setInterval(function(){
        var total = video.duration;//视频总时长
        var nowTime = video.currentTime;//当前播放时间
        time.innerHTML = parseInt(nowTime/60) + ":" + parseInt(nowTime%60) + "/" + parseInt(total/60) + ":" + parseInt(total%60);//设置播放时间

 

        var progressBarWidth = nowTime / total * progressBar.clientWidth;
        progressBar.getElementsByTagName("div")[0].style.width = width + "px";
        progressBar.getElementsByTagName("i")[0].style.left = width + "px";
    }, 1000);

 

    progressBar.onmouseenter = function(){
        progressBar.style.height = "14px";
        progressBar.style.top = "-14px";
        progressBar.getElementsByTagName("div")[0].style.height = "14px";
        progressBar.getElementsByTagName("i")[0].style.height = "18px";
    };
    progressBar.onmouseleave = function(){
        progressBar.style.height = "2px";
        progressBar.style.top = "-2px";
        progressBar.getElementsByTagName("div")[0].style.height = "2px";
        progressBar.getElementsByTagName("i")[0].style.height = "6px";
    };
    progressBar.onclick = function(e){
        var location = e.layerX;
        var width = progressBar.clientWidth;
        var targetTime = location / width * video.duration;
        video.currentTime = targetTime;//只有在响应头(Response Headers)里面有Content-Range属性,才能进行进度跳转,否则不能进行跳转
    };
    quick.onclick = function(){
        quickList.style.display = "block";
    }
    quick.onmouseleave = function(){
        quickList.style.display = "none";
    }

 

    var liList = quickList.getElementsByTagName("ul")[0].getElementsByTagName("li");
    for(var i = 0; i < liList.length; i++){
        list[i].index = i;
        list[i].onclick = function(){
            if(this.index == 0){//正常
                video.playbackRate = 1;//设置速率
                quick.innerHTML = "倍速";
            }else if(this.index == 1){//1.25
                video.playbackRate = 1.25;
                quick.innerHTML = "x 1.25";
            }else if(this.index == 2){//1.5
                video.playbackRate = 1.5;
                quick.innerHTML = "x 1.5";
            }else if(this.index == 3){//2
                video.playbackRate = 2;
                quick.innerHTML = "x 2";
            }
        }
    }

 

    volAdd.onclick = function(){
        video.volume = video.volume + 0.1 > 1 ? 1 : video.volume + 0.1;
    }
    volIns.onclick = function(){
        video.volume = video.volume - 0.1 < 0 ? 0 : video.volume - 0.1;
    }

 

    fullScreen.onclick = function(){
        var dom = document.documentElement;
        dom.requestFullscreen();//全屏
        videoPlayer.style.width = window.screen.width + "px";
        videoPlayer.style.height = window.screen.height + "px";
        video.style.style.width = window.screen.width + "px";
        video.style.style.height = window.screen.height + "px";
    }

 

    videoPlayer.onmousemove = function(){
        //利用函数防抖控制菜单隐藏,未实现
        menu.style.display = "block";
    };
</script>
```
 
以上是markdown格式的笔记
posted @ 2020-05-27 21:42  lanshanxiao  阅读(78)  评论(0编辑  收藏