我想在浏览器中播放本地磁盘的视频文件，所以我找到了这段代码。你能告诉我为什么它不起作用吗？在 jsfiddle 上它可以工作，但是当我将它复制到项目中时它就无法工作。您还可以告诉我什么给出了像function name(x){variables}(window)这样的函数声明。
我得到的错误是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>
最佳答案
问题是，您的代码在 DOM 准备好/加载之前运行。
有两种方法可以解决这个问题。
1) 将整个 javascript 代码块移至 <video controls autoplay></video> 下面
或
2) 使用document.addEventListener("DOMContentLoaded", function() { });像这样:
<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>
关于javascript - HTML 视频播放器，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24302585/