HTML5css3学习总结(3)

html多媒体
   video与audio两个多媒体标签基本上使用方法一样，没有什么太大的区别。
   <video src="statics/.mp4"
       muted 静音
       autoplay 自动播放
       loop   循环
       constrols 控制面板
        ></video>
oVideo
   .play() 播放
   .pause() 暂停
   .volume 音量
   .muted 静音
   .currentTime 当前播放的时间
   .duration 已经播放的时间
   .onended 播放结束
   .ontimeupdate 返回当前播放的进度
   .webkitRequestFullscreen()全屏 chrome
   .mozRequestFullScreen()全屏 Firefox

音乐播放器代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        li{
            cursor: pointer;
        }

        li:hover{
            color: grey
        }

        li.active{
            color: silver;
        }

        li.active:before{
            content: url(statics/play.gif);
        }
    </style>
</head>
<body>
    <ul id="wrapper">
    </ul>
    <audio src="" controls></audio>
    <br>
    <button id="play">播放</button>
    <button id="pause">暂停</button>
    <button id="previous">上一首</button>
    <button id="next">下一首</button>
    <br>
    <input type="range" min="0" max="100" value="100">

    <button class="play-mode" id="listRepeat">列表循环</button>
    <button class="play-mode" id="singleRepeat">单曲循环</button>
    <button class="play-mode" id="random">随机播放</button>
    <script>
        var oUl = document.querySelector('ul');
        var oAudio = document.querySelector('audio');
        var oRange = document.querySelector('input');
        var oPlay = document.querySelector('#play');
        var oPause = document.querySelector('#pause');
        var oNext = document.querySelector('#next');
        var oPrevious = document.querySelector('#previous');

        var aPlayMode = document.querySelectorAll('.play-mode');

        var currentIndex = 0;

        var playMode = "listRepeat";

        // 调整音量
        oRange.oninput = function(){
            oAudio.volume = oRange.value/100;
        }

        // 播放
        oPlay.onclick = function(){
            playSong();
        }

        // 暂停
        oPause.onclick = function(){
            oAudio.pause();
        }
        //歌曲列表
        var songs = [
            "花房姑娘",
            "喜剧之王",
            "counting-stars",
            "greenslave",
            "young-for-you"
        ]
        //循环歌曲列表，创建div添加到页面上
        songs.forEach(function(song){
            var oLi = document.createElement('li');
                oLi.innerHTML = song;

            oUl.appendChild(oLi);
        })

        var aLi = document.querySelectorAll('li');

        // 下一首
        oNext.onclick = function(){
            // 根据播放模式选取下一首歌
            playNextSong();
        }

        oAudio.onended = function(){
            // 根据播放模式选取下一首
            playNextSong();
        }

        // 上一首
        oPrevious.onclick = function(){
            playPreviousSong()
        }

        // 点击播放
        aLi.forEach(function(oLi,index){

            oLi.onclick = function(){
                currentIndex = index;
                playSong();
            }
        })

        // 播放模式更改
        aPlayMode.forEach(function(oPlayMode){
            oPlayMode.onclick = function(){
                playMode = this.id;
                console.log(playMode);
            }
        })

        // 播放下一首歌的判断逻辑
        function playNextSong(){
            if( playMode == 'listRepeat' ){
                currentIndex++;
                currentIndex = currentIndex%songs.length;
                playSong();

            } else if( playMode == 'singleRepeat' ){
                playSong();
            } else if( playMode == 'random' ){
                currentIndex = rnd(0,songs.length,currentIndex);
                playSong();
            }
        }
        //上一首
        function playPreviousSong(){
            if( playMode == 'listRepeat' ){
                currentIndex -- ;
                if( currentIndex < 0 ){
                    currentIndex = songs.length - 1
                }

                playSong();
            } else if( playMode == 'singleRepeat' ){
                playSong();
            } else if( playMode == 'random' ){
                currentIndex = rnd(0,songs.length,currentIndex);
                playSong();
            }
        }

        function playSong(){
            oAudio.src = `statics/music/${songs[currentIndex]}.mp3`;

            // 移除原activeDOM节点
            var activeOne = document.querySelector('.active')

            activeOne && activeOne.classList.remove('active');

            aLi[currentIndex].classList.add('active');

            oAudio.play();
        }
        
        function stopPlay(){

            var oActive = document.querySelector('.active');

            oActive && oActive.classList.remove('active');

            // 停止播放
            oAudio.currentTime = 0;
            oAudio.pause();
        }
        //随机数，传入一个special的值，下面用于判断。如果这个值有了。就从新随机，没有的话就直接return
        function rnd(n,m,special){
            var result = parseInt(Math.random()*(m-n)+n);

            return result == special ? rnd(n,m,special) :result
        }

    </script>
</body>
</html>

视频格式
mp4 √
avi rmvb flv mov mkv 3gp wmv
音频格式
mp3 √
wma ape m4a

<input>表单
   type="emial" form内部有格式验证靠不住
以下属性boolean对其无效
pattern="[A-Za-z]{3}"。用于输入框验证输入的类型正则
<input type='text' readonly />readonly表示只读，不能更改；
disabled 阻止点击禁用
placeholder占位符输入框占位文字
<input type="text" required/> 必须输入内容才能提交；
autofocus 自动聚焦输入框
   type="color" 颜色
   type="time" 时间
   type="date" 日期
   type="week" 周末
   type="search" 搜索输入框有个清空按钮；
   type="file" 文件

HTML5文件拖拽
ondragenter
   拖拽文件进入
ondragleave
   拖拽文件离开
ondragover
   拖拽文件悬停(一直触发)
ondrop丢下文件
   想要触发：
       必须取消dragover的默认事件
   ev -> ev.dataTransfer.files
ondragenter与ondragleave有问题，用setTimeout加上ondragover模拟；
FileReader

// 文件对象
   var file = ev.dataTransfer.files[0];
   var reader = new FileReader(); 文件读取对象

       reader下面有两个事件
           .readAsText只读文本(ev.srcElement.files[0])
           .readAsDataURL图像、视频、音频(ev.srcElement.files[0])

       reader
           .onloadstart 文件加载开始
           .onprogress 文件加载中{loaded total}可以得出进度条比例
           .onload 可以拿到reader.reslut的数据
           .onloadend 文件加载完成；

           .error 文件加载失败
           .abort 文件加载终止

           .abort();文件加载终止

       读取文件:
           reader.result

       文本文件：文本
       多媒体文件：base64编码

input type="file"
   ev -> srcElement -> files