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

时间: 2024-09-30 10:46:24

HTML5css3学习总结(3)的相关文章

HTML5css3学习总结(4)canvas绘图

canvas HTML5 重中之重 canvas是HTML5中的重点:今天简单的学习了一下,总结一下canvas的概念:canvas是要有面向对象的思维:各个标签就像我们画水彩画一样,需要注意标签使用的顺序canvas就是一个画布:可以画线,图形,填充等.操作图片和文本.操作方式是使用js:可以提供2d图形,3d图形绘制: canvas使用:①<canvas id='myCanvas' width='500' height='500'></canvas>需要有一个ID ,画布的尺寸

HTML5-CSS3学习20150410(一)

一. HTML5在JS方面新增的东西 document.querySelector(“css选择器”); document .querySelectorAll(“css选择器”); var aEle = document.querySelectorAll(“li input[type=text]”); var obj = document.querySelector(“li input[type=text]”); aEle[0].style.background = red; obj.style

Vue.js学习笔记:属性绑定 v-bind

v-bind  主要用于属性绑定,Vue官方提供了一个简写方式 :bind,例如: <!-- 完整语法 --> <a v-bind:href="url"></a> <!-- 缩写 --> <a :href="url"></a> 绑定HTML Class 一.对象语法: 我们可以给v-bind:class 一个对象,以动态地切换class.注意:v-bind:class指令可以与普通的class特

Java多线程学习(吐血超详细总结)

林炳文Evankaka原创作品.转载请注明出处http://blog.csdn.net/evankaka 目录(?)[-] 一扩展javalangThread类 二实现javalangRunnable接口 三Thread和Runnable的区别 四线程状态转换 五线程调度 六常用函数说明 使用方式 为什么要用join方法 七常见线程名词解释 八线程同步 九线程数据传递 本文主要讲了java中多线程的使用方法.线程同步.线程数据传递.线程状态及相应的一些线程函数用法.概述等. 首先讲一下进程和线程

微信小程序学习总结(2)------- 之for循环,绑定点击事件

最近公司有小程序的项目,本人有幸参与其中,一个项目做下来感觉受益匪浅,与大家做下分享,欢迎沟通交流互相学习. 先说一下此次项目本人体会较深的几个关键点:微信地图.用户静默授权.用户弹窗授权.微信充值等等. 言归正传,今天分享我遇到的关于wx:for循环绑定数据的一个tips:  1. 想必大家的都知道wx:for,如下就不用我啰嗦了: <view class="myNew" wx:for="{{list}}">{{item.title}}<view

【安全牛学习笔记】

弱点扫描 ╋━━━━━━━━━━━━━━━━━━━━╋ ┃发现弱点                                ┃ ┃发现漏洞                                ┃ ┃  基于端口五福扫描结果版本信息(速度慢)┃ ┃  搜索已公开的漏洞数据库(数量大)      ┃ ┃  使用弱点扫描器实现漏洞管理            ┃ ╋━━━━━━━━━━━━━━━━━━━━╋ [email protected]:~# searchsploit Usage:

winform学习日志(二十三)---------------socket(TCP)发送文件

一:由于在上一个随笔的基础之上拓展的所以直接上代码,客户端: using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Linq; using System.Text; using System.Windows.Forms; using System.Net.Sockets; using Sys

零基础的人该怎么学习JAVA

对于JAVA有所兴趣但又是零基础的人,该如何学习JAVA呢?对于想要学习开发技术的学子来说找到一个合适自己的培训机构是非常难的事情,在选择的过程中总是 因为这样或那样的问题让你犹豫不决,阻碍你前进的步伐,今天就让小编为您推荐培训机构新起之秀--乐橙谷Java培训机构,助力你成就好未来. 选择java培训就到乐橙谷 北京有什么好的Java培训机构?来乐橙谷北京学Java,零基础走起,乐橙谷Java基础班授课老师经验非常丰富,课程内容安排合理,适合于有一点点Java基础甚至一点都不会Java的同学学

最全解析如何正确学习JavaScript指南,必看!

划重点 鉴于时不时,有同学私信问我:怎么学前端的问题.这里统一回复一下,如下次再遇到问我此问题同学,就直接把本文链接地址发给你了. "前端怎么学"应该因人而异,别人的方法未必适合自己.就说说我的学习方法吧:我把大部分时间放在学习js上了.因为这个js的学习曲线,先平后陡.项目实践和练习啥的,我不说了,主要说下工作之外的时间利用问题.我是怎么学的呢,看书,分析源码.个人这几天统计了一下,前端书籍目前看了50多本吧,大部分都是js的.市面上的书基本,差不多都看过. 第一个问题:看书有啥好处