无法在play_pause读取null的属性“pause”
无法在play_pause读取null的属性“pause”
提问于 2018-01-10 06:39:40
嗨，伙计们，我想做一个自定义的视频播放器。
我正在尝试使按钮暂停或播放视频，但它不能这样做。
Html代码: index.html
<html>
<head>
<script type="text/javascript" src="../js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="../js/player.js"></script>
<link rel="stylesheet" href="../css/style.css" />
<title></title>
</head>
<body>
<video id="main_video" src="../media/4k.mp4" controls autoplay></video>
<p>
<button onclick="play_pause()" type="button">PLAY/PAUSE</button>
</body>
</html>Javascript代码: player.js
var video_screen = document.getElementById('main_video');
var play_pause_status = "play";
function play_pause()
{
if (play_pause_status == "pause")
{
video_screen.play();
play_pause_status = "play";
}
else
{
video_screen.pause();
play_pause_status = "pause";
}
}当我单击按钮时，这是显示的错误：
Uncaught TypeError: Cannot read property 'pause' of null at play_pause
我想将我的Javascript代码保存在一个单独的文件中。
我不能理解这个错误，请帮助我。
回答 2
Stack Overflow用户
回答已采纳
发布于 2018-01-10 06:46:42
确保在查询之前加载了DOM。您提到的错误是由video_screen.pause()引起的。当脚本运行时(在DOM完全加载之前)，video_screen元素为空，这可能是导致错误的原因。
$(document).ready(function() {
var video_screen = document.getElementById('main_video');
var play_pause_status = "play";
function play_pause()
{
if (play_pause_status == "pause")
{
video_screen.play();
play_pause_status = "play";
}
else
{
video_screen.pause();
play_pause_status = "pause";
}
}
});Stack Overflow用户
发布于 2018-01-10 06:46:00
使用$(document).ready，并将您的代码包装在其中。您的代码在文档准备好之前被调用。或者，您可以在函数本身中获取元素，如下面的代码片段所示。
var play_pause_status = "play";
function play_pause() {
var video_screen = document.getElementById('main_video');
if (play_pause_status == "pause") {
video_screen.play();
play_pause_status = "play";
} else {
video_screen.pause();
play_pause_status = "pause";
}
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<video id="main_video" src="https://www.w3schools.com/html/mov_bbb.mp4" controls autoplay></video>
<p>
<button onclick="play_pause()" type="button">PLAY/PAUSE</button>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/48177691
复制相关文章
相似问题
腾讯云开发者
