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