標籤：firefox search orm stop list 頁面 fileread span onload
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
HTML5css3學習總結(3)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
