HTML视频播放器

我想从浏览器中的本地磁盘播放视频文件，所以我找到了这个代码。你能告诉我为什么它不起作用吗？在jsfiddle它的作品，但是当我把它复制到项目中将无法正常工作。你也可以告诉我什么给函数声明像function name(x){variables}(window)。HTML视频播放器

我得到的错误是Uncaught TypeError: Cannot read property 'addEventListener' of null

感谢您的帮助:)

<html> 
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
</head> 
<body> 

    <script> 
     (function localFileVideoPlayerInit(win) { 
      var URL = win.URL || win.webkitURL, 
        playSelectedFile = function playSelectedFileInit(event) { 
         var file = this.files[0]; 
         var type = file.type; 
         var videoNode = document.querySelector('video'); 
         var canPlay = videoNode.canPlayType(type); 
         canPlay = (canPlay === '' ? 'no' : canPlay); 
         var message = 'Can play type "' + type + '": ' + canPlay; 
         var isError = canPlay === 'no'; 
         displayMessage(message, isError); 
         if (isError) { 
          return; 
         } 
         var fileURL = URL.createObjectURL(file); 
         videoNode.src = fileURL; 
        }, 
        inputNode = document.querySelector('input'); 
      if (!URL) { 
       displayMessage('Your browser is not ' + 
         '<a href="http://caniuse.com/bloburls">supported</a>!', true); 
       return; 
      } 
      inputNode.addEventListener('change', playSelectedFile, false); 
     }(window)); 
    </script> 

    <h1>HTML5 local video file player example</h1> 
    <div id="message"></div> 
    <input type="file" accept="video/*"/> 
    <video controls autoplay></video> 
</body> 
</html>

来源

2014-06-19 KorWojci

的问题是，你的代码运行之前DOM就绪/加载。

有两种方法可以解决这个问题。

1）将以下<video controls autoplay></video>

或

2）使用document.addEventListener("DOMContentLoaded", function() { });这样的整个JavaScript代码块：

<script> 
document.addEventListener("DOMContentLoaded", function() { 
    var URL = window.URL || window.webkitURL, 
      playSelectedFile = function playSelectedFileInit(event) { 
       var file = this.files[0]; 
       var type = file.type; 
       var videoNode = document.querySelector('video'); 
       var canPlay = videoNode.canPlayType(type); 
       canPlay = (canPlay === '' ? 'no' : canPlay); 
       var message = 'Can play type "' + type + '": ' + canPlay; 
       var isError = canPlay === 'no'; 
       displayMessage(message, isError); 
       if (isError) { 
        return; 
       } 
       var fileURL = URL.createObjectURL(file); 
       videoNode.src = fileURL; 
      }, 
      inputNode = document.querySelector(("input[type=file]")); 
    if (!URL) { 
     displayMessage('Your browser is not ' + 
       '<a href="http://caniuse.com/bloburls">supported</a>!', true); 
     return; 
    } 
    inputNode.addEventListener('change', playSelectedFile, false); 
}); 
</script>

来源

2014-06-19 09:04:14 Latheesan

谢谢！所以函数声明意味着函数名（x）{}（窗口）中的{}后面的参数（）中的参数将是x的默认参数？ :) – KorWojci

Parens在函数表达式的末尾调用函数。 Parens只是调用语法。传递给函数的参数依然存在。 –

谢谢Latheesan :) – Cesare

HTML视频播放器

回答

相关问题