個人博客已上線，歡迎前去訪問評論！
無媛無故 - wangchloe的個人博客
以下內容若有問題煩請即時告知我予以修改，以免誤導更多人。
- H5視頻 video
- (1) 屬性
- (2) 方法
- H5文件 FileReader
- (1) 文件拖拽
- (2) File接口
- (3) 示例
9. H5視頻 video
不同瀏覽器支持的格式不同，可能需要轉碼，在source標簽里引入多種格式
FF不支持mp4，支持ogg
(1) 屬性
src -> 視頻路徑
controls -> 顯示自帶控制進度條
loop -> 視頻循環
autoplay -> 自動播放
muted -> 靜音
currentTime -> 當前播放時間
duration -> 視頻總時間
volume -> 音量 [0,1]
ontimeupdate -> 進度更新
play -> 是否在播放 返回true/false
pause -> 是否暫停 返回true/false
(2) 方法
- play() -> 播放視頻
- pause() -> 暫停視頻
- load() -> 重新加載視頻
- onended() -> 視頻播放完畢
常見結構
<html>
<video src="xxx.mp4" controls></video>
<hr>
<video controls>
<source src="xxx.mp4">
<source src="xxx.ogg">
</video>
<hr>
<video src="xxx.mp4" id="v1" width="400px" height="200px"></video>
<button onclick="play()">播放/暫停</button>
</html>
<script>
var v1 = document.getElementById('v1');
function play() {
if(v1.paused) {
v1.play();
} else {
v1.pause();
}
}
</script>
10. H5文件 FileReader
(1) 文件拖拽
- ondragover -> 只要懸浮，一直觸發
- ondragenter -> 進入時觸發，有子節點時有問題
- ondragleave -> 離開時觸發，有子節點時有問題
- ondrop -> 釋放鼠標時觸發，對應DOM節點的dragover事件必須取消默認事件
(2) File接口
var reader = new FileReader(); 新建文件讀取對象
方法
.readAsText(file)-> 讀取文本文件.readAsDataURL(file)-> 讀取多媒體.onload-> 資源讀取完畢 reader.result.onprogress-> 讀取進度更新時觸發
<progress max="100"></progress>
<script>
reader.onprogress = function(ev){
oProgress.value = ev.loaded/ev.total*100;
}
</script>
.onloadstart-> 加載開始時觸發.onloadend-> 加載結束時觸發.onerror-> 出現錯誤時觸發.onabort-> 加載過程中中止時觸發.abort-> 手動中止加載
(3) 示例
- 文本
<script>
oBlock.ondrop = function(ev) {
var file = ev.dataTransfer.files[0];
var reader = new FileReader();
reader.readAsText(file); // 讀取文本文件
reader.onload = function(ev) {
console.log(reader.result);
}
ev.preventDefault();
}
</script>
- 多媒體
<script>
oBlock.ondrop = function(ev) {
var file = ev.dataTransfer.files[0];
var reader = new FileReader();
reader.readAsDataURL(file); // 讀取多媒體
reader.onload = function(ev) {
new Audio(reader.result).play();
}
ev.preventDefault();
}
</script>
- 處理文本/多媒體
<script>
oBlock.ondrop = function(ev) {
var file = ev.dataTransfer.files[0];
var reader = new FileReader();
if (/text/.test(file.type)) { // 處理文本
reader.readAsText(file);
reader.onload = function() {
document.write(reader.result);
}
console.log('text');
} else { // 處理多媒體
reader.readAsDataURL(file);
reader.onload = function() {
if (/image/.test(file.type)) {
console.log('image');
var oImage = new Image();
oImage.src = reader.result;
document.body.appendChild(oImage)
} else if (/video/.test(file.type)) {
console.log('video');
oVideo.src = reader.result;
oVideo.play();
} else {
console.log('audio');
new Audio(reader.result).play();
}
}
}
ev.preventDefault();
}
</script>
更多內容可以訂閱本人微信公眾號，一起開啟前端小白進階的世界！
公眾號是堅持日更的，不發文的時候推送一些我覺得好用的前端網站或者看到的一些問題的解決方案，也更便于大家交流，就醬。
微信公眾號：無媛無故
