【Javascript】进阶之video在项目中的实现

功能

1.点击歌曲，切换到对应视频

2.选中的歌曲黑色背景橘黄颜色，且划上有黑色背景

3.点击白天模式，切换成白天模式样式

4.倍速功能

代码实现

1.HTML

 <!-- video part -->
        <div class="uppanel">
            <div class="container clearfix">
                <h3 class="title" id="title">01 阿冗-你的答案
                    <a href="../index.html">&lt;返回主页</a>
                </h3>
                <div class="videolist fl" id="videolist">
                    <video src="../media/你的答案.mp4" controls>
                    </video>
                </div>
                <div class="catalog fl" id = "catalog">
                    <a href="#">目录</a>
                    <i></i>
                </div>
                <ul class="playlist fl" id="playlist">
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
                <div style="clear:both"></div>
                <div class="operation">
                    <a href="javascript:;">
                        <img src="../img/line.png" alt="">
                        &nbsp;线路
                    </a>
                    <a href="javascript:;">
                        <img src="../img/favorite.png" alt="">
                        &nbsp;收藏
                    </a>
                    <a href="javascript:;">
                        <img src="../img/phonelook.png" alt="">
                        &nbsp;手机看
                    </a>
                    <a href="javascript:;">
                        <img src="../img/feedback.png" alt="">
                        &nbsp;问题反馈
                    </a>
                    <a href="javascript:;" id = "mode">
                        <img src="../img/daymode.png" alt="">
                        &nbsp;白天模式
                    </a>
                    <a href="javascript:;" id = "ratechangelink">
                        <img src="../img/speed.png" alt="">
                        &nbsp;倍速
                    </a>
                </div>

                <!-- rate change -->
                <ul class="ratechangelist">
                    <li>x 1倍</li>
                    <li>x 1.2倍</li>
                    <li>x 1.35倍</li>
                    <li>x 1.5倍</li>
                    <li>x 1.6倍</li>
                    <li>x 1.8倍</li>
                    <li>x 2.0倍</li>
                </ul>
            </div>
        </div>

2.CSS(默认根元素为100px)

main .uppanel{
    width: 100%;
    height: 5.85rem;
    background-color: #2B2B2B;
    position: relative;
}
main .uppanel .container  h3{
    color: #9D9AC2;
    width: 11.99rem;
    height: .45rem;
    font: .14rem/.45rem "微软雅黑";
    /* background-color: #10D269; */
}
main .uppanel .container  h3 > a{
    float: right;
    padding-right: .2rem;
    color: #9D9AC2;
}
main .uppanel .container .videolist{
    width: 8.6rem;
    height: 4.85rem;
}

main .uppanel .container .videolist > video{
    width: 8.6rem;
    height: 4.85rem;
    border:none;
    outline: none;
}
main .uppanel .container .videolist > video::-webkit-media-controls-play-button{
    background-color: #33beef;
    font-size:.2rem;
    border-radius: 50%;
    margin:0.01rem .1rem;
}

main .uppanel .container .catalog{
    width: 3.39rem;
    height: .5rem;
    background-color: #3F3F3F;
    border-bottom: .01rem solid #AAAAAA;
    margin-left: -.01rem;
    position: relative;
}
main .uppanel .container .catalog > a{
    display: block;
    width: 1.1rem; 
    height: .48rem;
    font:.15rem/.5rem "微软雅黑";
    text-align: center;
    background-color: #323232;
    color: #999999;
    font-weight: bold;  
}
main .uppanel .container .catalog > i{
    display: block;
    width: .3rem;
    height: .03rem;
    background-color: #65A0E7;
    position: absolute;
    left: .4rem;
    bottom: 0;
    display: none;
}
main .uppanel .container .playlist{
    width: 3.39rem;
    height: 4.35rem;
    background-color: beige;
    margin-left: -.02rem;
    overflow-y: scroll;
    overflow-x: hidden;
}
main .uppanel .container .playlist::-webkit-scrollbar {/*滚动条整体样式*/
    width: 0.1rem;     /*高宽分别对应横竖滚动条的尺寸*/
    height: 0.01rem;
}

main .uppanel .container .playlist::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
    border-radius: .1rem;
     -webkit-box-shadow: inset 0 0 .05rem rgba(0,0,0,0.3);
    background: #535353;
 }

main .uppanel .container .playlist::-webkit-scrollbar-track {/*滚动条里面轨道*/
    -webkit-box-shadow: inset 0 0 .05rem rgba(0,0,0,0.3);
    border-radius: .1rem;
    background: #EDEDED;
} 
main .uppanel .container .playlist{
    background-color: #333333;
}
main .uppanel .container .playlist > li{
    width: 3.3rem;
    height: .7rem;
    line-height: .7rem;
    border-bottom: .01rem solid #AAAAAA;
    text-indent: .2rem;
    /* background-color: #333333; */
}
main .uppanel .container .playlist .night:hover{
    background-color: #000000;
    
}
main .uppanel .container .playlist .day:hover{
    background-color: #ffffff;
}
main .uppanel .container .playlist .day:hover a{
    color: #EF7407;
}
main .uppanel .container .playlist > li > a{
  color: #999999;
  font-size: .15rem;
}
main .uppanel .container .playlist > li > i{
    color: #999999;
    font-size: .2rem;
    float: right;
    margin-right: .25rem;
    vertical-align: middle;
}
main .uppanel .operation{
    margin-top: .2rem;
}
main .uppanel .operation > a{
    padding-right: .2rem;
    color: #999999;
}
main .uppanel .operation > a > img{
    vertical-align: bottom;
}
main .uppanel .container .ratechangelist{
    width: .7rem;
    height: 2.45rem;
    position: absolute;
    left:4.7rem;
    bottom: 0.18rem;
    cursor: pointer;
    z-index: 20;
    display: none;
    background-color: #2B2B2B;
    color: #FFFFFF;
}
main .uppanel .container .ratechangelist li:hover{
    background-color: #10D269;
}
main .uppanel .container .ratechangelist li{
    width: .7rem;
    height: .35rem;
    font: .13rem/.35rem "微软雅黑";
    text-align: center;
    
}

Javascript

    /* 
            Rate change section, click rate. the broadcasting speed shift to 
            corresponding rate
        */
    var rateChangeLink = document.getElementById('ratechangelink');
    var rateChangeList = document.querySelector('.ratechangelist');

    //When mouse enter into ratechangelink, display 
    //rateChangelist
    rateChangeLink.onmouseenter = function () {
        rateChangeList.style.display = 'block';
    }
    // When mouse leave, hide rate change list
    rateChangeList.onmouseleave = function () {
        this.style.display = 'none';
    }

    // Get video element
    var videoList = document.getElementById('videolist');
    // console.log(videoList);
    var video = videoList.getElementsByTagName('video')[0];
    // canpplay event
    video.oncanplay = function () {

    }
    // Get all rate button
    var rates = rateChangeList.getElementsByTagName('li');
    // console.log(rates[0]);

    var times = [1, 1.2, 1.35, 1.5, 1.6, 1.8, 2.0];
    var timesLabel = ['x 1倍', 'x 1.2倍', 'x 1.35倍', 'x 1.5倍',
        'x 1.6倍', 'x 1.8倍', 'x 2.0倍'];
    // Give function to each rate

    for (var i = 0; i < rates.length; i++) {
        rateClick(rates[i], times[i]);
    }

    video.onratechange = function () {
        // video.load(); //refresh
        video.play();
    }


    function rateClick(ele, time) {
        ele.onclick = function () {
            video.playbackRate = time;
            // exlusive
            for (var k = 0; k < rates.length; k++) {
                rates[k].style.backgroundColor = '';
                rates[k].innerHTML = timesLabel[k];
            }
            this.style.backgroundColor = '#10D269';
            rateChangeLink.innerHTML = this.innerHTML;
            this.innerHTML = '<i class = "iconfont icon-dui2"></i> ' + this.innerHTML;
        }
    }

  // Get data from ajax (playlist)
    ajax('get', '../data/playList.json', '', function (res) {
        // console.log(res);
        // Transform data

        var playList = JSON.parse(res);
        // console.log(playList);
        // Rendering data into playlist
        var playListUl = document.getElementById('playlist');
        // console.log(playListUl);

        // Get every li
        var playlistLis = playListUl.getElementsByTagName('li');
        // console.log(playlistLis);

        // Get every a, i
        // get content
        var content = playListUl.getElementsByTagName('a');
        var label = playListUl.getElementsByTagName('i');
        // console.log(content, label);
        // Rendering playlist
        for (var i = 0; i < playlistLis.length; i++) {
            playlistLis[i].innerHTML = `<a href="#">${playList[i].title}</a>
                                        <i class="iconfont icon-bo_fang1"></i>`;
        }

        // Get video element
        // var videoList = document.getElementById('videolist');
        // // console.log(videoList);
        // var video = videoList.getElementsByTagName('video')[0];
        // console.log(video);
        // Get title
        var title = document.getElementById('title');
        // console.log(title);

        // Change Mode
        var mode = document.getElementById('mode');
        // console.log(mode);

        // Get catalog box
        var catalogBox = document.getElementById('catalog');
        var catalogCon = catalog.querySelector('a');
        var catalogBottom = catalog.querySelector('i');
        // console.log(catalog, catalogCon);

        var num = 0;

        // Get uppanel
        var uppanel = document.querySelector('.uppanel');
        // console.log(uppanel);
        mode.tag = 0; // tag = 0 default night mode tag =1 day mode
        nightMode();

        // Background turns to black
        playlistLis[0].style.backgroundColor = '#000000';
        // Color turns to orange
        content[0].style.color = '#EF7407';
        label[0].style.color = '#EF7407';


        mode.onclick = function () {
            // if it is night mode, change to day mode
            if (this.tag == 0) {
                // change to day mode
                // label change
                this.innerHTML = '<img src="../img/nightmode.png" alt=""> &nbsp;黑夜模式';
                
                dayMode();
                // console.log(num);
                playlistLis[num].style.backgroundColor = '#ffffff';
                // change tag
                this.tag = 1;
            } else {
                this.innerHTML = '<img src="../img/daymode.png" alt="">&nbsp;白天模式';
                
                nightMode();
                // console.log(num);
                playlistLis[num].style.backgroundColor = '#333333';
                // change tag
                this.tag = 0;
            }
        }

        // DayMode();

        // NightMode();
        function dayMode() {
            // The background of uppanel is #F7F7F7
            uppanel.style.backgroundColor = '#F7F7F7';
            // The background of catlogbox is #ffffff
            catalogBox.style.backgroundColor = '#FFFFFF';
            // The background of catalog content is #ffffff
            catalogCon.style.backgroundColor = '#FFFFFF';
            // The color of catalog content is #999999
            catalogCon.style.color = '#65A0E7';
            // Add border-bottom to the catalogCon
            catalogBottom.style.display = "block";
            // The background of playlist #FFFFFF
            playListUl.style.background = '#FFFFFF';
            // the background of rateChangeList is  #ffffff
            rateChangeList.style.backgroundColor = '#ffffff';
            // The color of rateChangelist is #333333
            rateChangeList.style.color = '#333333';

            for (var i = 0; i < playlistLis.length; i++) {
                // save index
                playlistLis[i].index = i;
                playlistLis[i].className = 'day';
                // add click event
                playlistLis[i].onclick = function () {
                    // console.log(this.index);
                    shiftVideo(this.index);
                    num = this.index;
                    // Exclusive
                    for (var j = 0; j < playlistLis.length; j++) {
                        playlistLis[j].style.backgroundColor = '';
                        content[j].style.color = '';
                        label[j].style.color = '';
                    }
                    // Background turns to white
                    this.style.backgroundColor = '#ffffff';
                    // Color turns to orange
                    content[this.index].style.color = '#EF7407';
                    label[this.index].style.color = '#EF7407';
                }
            }
        }
        // When click every li, video shift to corresponding src
        // title changes as well
        function nightMode() {
            // The background of uppanel is #2B2B2B
            uppanel.style.backgroundColor = '#2B2B2B';
            // The background of catlogbox is #3f3f3f
            catalogBox.style.backgroundColor = '#3F3F3F';
            // The background of catalog content is #323232
            catalogCon.style.backgroundColor = '#323232';
            // The color of catalog content is #999999
            catalogCon.style.color = '#999999'
            // The background of playlist #333333
            playListUl.style.background = '#333333';
            // remove border-bottom
            catalogBottom.style.display = "none";
            // the background of rateChangeList is  
            rateChangeList.style.backgroundColor = '#2B2B2B';
            // The color of rateChangelist is #ffffff
            rateChangeList.style.color = '#ffffff';
            for (var i = 0; i < playlistLis.length; i++) {
                // save index
                playlistLis[i].index = i;
                playlistLis[i].className = 'night';
                // add click event
                playlistLis[i].onclick = function () {
                    // console.log(this.index);
                    shiftVideo(this.index);
                    num = this.index;
                    // Exclusive
                    for (var j = 0; j < playlistLis.length; j++) {
                        playlistLis[j].style.backgroundColor = '';
                        content[j].style.color = '';
                        label[j].style.color = '';
                    }
                    // Background turns to black
                    this.style.backgroundColor = '#000000';
                    // Color turns to orange
                    content[this.index].style.color = '#EF7407';
                    label[this.index].style.color = '#EF7407';
                }
            }
        }

        function shiftVideo(index) {
            video.src = playList[index].src;
            title.innerHTML = playList[index].title + '<a href="../index.html">&lt;返回主页</a>';
        }
    });