首页 > 代码库 > HTML5css3学习总结(3)

HTML5css3学习总结(3)

2024-08-25 18:09:28   219人阅读

html多媒体
    video与audio两个多媒体标签基本上使用方法一样，没有什么太大的区别。
    <video src="http://www.mamicode.com/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="http://www.mamicode.com/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

HTML5css3学习总结(3)


联系
我们