每天10個前端知識點:HTML5(video、FileReader)

個人博客已上線,歡迎前去訪問評論!
無媛無故 - 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>

更多內容可以訂閱本人微信公眾號,一起開啟前端小白進階的世界!

公眾號是堅持日更的,不發文的時候推送一些我覺得好用的前端網站或者看到的一些問題的解決方案,也更便于大家交流,就醬。

微信公眾號:無媛無故
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 173,596評論 25 708
  • Spring Cloud為開發人員提供了快速構建分布式系統中一些常見模式的工具(例如配置管理,服務發現,斷路器,智...
    卡卡羅2017閱讀 134,993評論 19 139
  • 我終于明白自己是害怕死亡的。不,那不是害怕,那是對死亡的恐懼。我曾有無數次在心中想起,也無數次說起,死亡并不...
    4a31d6c21d75閱讀 162評論 0 0
  • 今天本來打算隨便發個照片交作業的,然后翻到了幾張舊照,才發現我四年前就喜歡上了奔馳S系哈哈。 也不知道我一個女孩子...
    樂否閱讀 153評論 12 2
  • 我們生活的舞臺處處充滿精英 我們前行的路途卻時時有泥濘 繁美多姿的季節盡是落葉飄零 輪換的建筑填平琉璃石井 是誰說...
    尚岸閱讀 226評論 2 6