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