未捕获的类型错误：无法在播放视频中读取 null 的属性'play'

我收到播放和暂停的错误......都说"未捕获的类型错误：无法在playVid读取null的属性'play'">

我在下面的代码，我不确定我做错了什么。

<button onclick="playVid()"  type="button">Play Video</button>
<button onclick="pauseVid()" type="button">Pause Video</button><br> 
<video id="myVideo" width="320" height="176">
<source src="<?php echo $video ?>" type="video/mp4">
</video>

var vid = document.getElementById("myVideo");
function playVid() {
vid.play();
}
function pauseVid() {
vid.pause();
}
function menuAnimate(x) {
$(".menu-wrap").toggleClass("open");
}

始终在加载所有 HTML 元素后运行脚本

首先运行脚本时会发生什么情况

var vid = document.getElementById("myVideo");

由于元素的主体未加载，因此不存在具有myVideoID 和 Vid 初始化为null

现在，当您单击按钮时，playVid()被调用但无法执行vid.play()vid因为初始化为null

<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>

<button onclick="playVid()"  type="button">Play Video</button>
<button onclick="pauseVid()" type="button">Pause Video</button><br> 
<video id="myVideo" width="320" height="176">
<source src="<?php echo $video ?>" type="video/mp4">
</video>
<script>
var vid = document.getElementById("myVideo");
function playVid() {
vid.play();
}
function pauseVid() {
vid.pause();
}
function menuAnimate(x) {
$(".menu-wrap").toggleClass("open");
}
</script>
</body>
</html>

相关内容

最新更新

热门标签：