video无法触发oncanplay事件

Question

视频的地址是本地的文件就无法触发oncanplay事件 把地址改成某一个网址就可以 这是为什么

相关代码

// <video id="video" controls width="100%">

     <source src="1.mp4" type="video/mp4">
         <!-- <source src="https://media.w3.org/2010/05/sintel/trailer.mp4" type="video/mp4"> -->
</video>
<script>    
    window.onload = function() {    
        var video = document.getElementById("video");
        video.addEventListener('canplay', function() {
        console.log(video.duration);
        })
    }

Answer 1

或許是加載太快了，例如從緩存加載了，而Canplay事件是只要可以開始播放就會觸發且只觸發一次。因此他有兩個特點：
1.不需要完整加載視頻
2.只觸發一次

因此它可能在window.onload之後video.addEventListener之前就觸發了，而第二點問題是，你的script放在後面，就不需要window.onload了，因為網頁自上而下加載，加載到腳本才執行，因此本身就已經是把上面的頁面加載完成的，你這時綁定onload事件，可能因為加載過快使得綁定之前onload就已經觸發了，所以裡面的都會失效。

排錯的一個技巧：給不同的執行階段加上console.log或是alert，看看有哪些是執行了的，有哪些沒有被執行，代碼停在了什麼地方。你這個可能是onload本身就沒執行，你在裡面綁定事件監聽自然沒用。