javascript - 未捕获的类型错误 : Cannot set property 'volume' of null

标签 javascript html

此时此刻,我感到非常沮丧。 我想通过 javascript 控制视频:

  • 将音量设为 20%
  • 点击视频即可播放和暂停

因为我有这个 html(其中还包括一些 php)

<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="player.js" type="text/javascript"></script>
</head>
<body>
<?php
        if(isset($_GET["id"])) {
                $video = $_GET["id"];
        }else{
                $video = "test.mp4";
        }
?>

<video id="video" preload="auto" autoplay="true"  loop="loop">
     <?php echo "<source src=\"$video\" type=\"video/mp4\">"; ?>
     <source src="movie.webm" type="video/webm">
          Sorry, your browser does not support HTML5 video.
</video>
</body>

player.js:

var vid = document.getElementById('video');

vid.volume = 0.2;

vid.addEventListener('click', function () {
        if (vid.paused == false) {
            vid.pause();
            vid.firstChild.nodeValue = 'Play';
        } else {
            vid.play();
            vid.firstChild.nodeValue = 'Pause';
        }
});

但 Chrome 控制台仅显示:Uncaught TypeError: Cannot set property 'volume' of null 这是为什么? 提前致谢!

最佳答案

您应该将 script 标签移到 body 标签的末尾,目前脚本加载时您的 DOM 尚未设置,因此它无法从 DOM 访问元素。

关于javascript - 未捕获的类型错误 : Cannot set property 'volume' of null,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48629562/

相关文章:

javascript - 仅当 Javascript 在视口(viewport)中时才执行

javascript - HTML5 录制音频到文件

Javascript 只适用于第一个 block ?

html - 背景 CSS 图像消失。在浏览器关闭之前不会重新出现

python - 使用 BeautifulSoup 抓取网页链接标题和 URL

javascript - 如何在javascript中查找字符串中子字符串的出现次数?

javascript - ExtJS 对用户点击 tabpanel 中的选项卡使用react

javascript - 使用javascript使文本淡出

javascript - 使用 javascript 永久更改 html 值?

javascript - 下拉 Javascript 菜单重叠