gpt4 book ai didi

javascript - 无法在 play_pause 处读取 null 的属性 'pause'

转载 作者:行者123 更新时间:2023-12-03 02:44:07 24 4
gpt4 key购买 nike

大家好,我正在尝试制作一个自定义视频播放器。

我正在尝试使用按钮暂停或播放视频,但无法执行此操作。

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 代码保存到一个单独的文件中。

我无法理解该错误,请帮忙。

最佳答案

使用 $(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>

关于javascript - 无法在 play_pause 处读取 null 的属性 'pause',我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48177691/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com