CODEWITHSUNDEEP
javascripthtml
paula
paula

Reputation: 264

Cannot read property 'paused' of null

I am trying to do a customised video in html and css. When I try to click PLAY button the following error pops up: Uncaught TypeError: Cannot read property 'paused' of null

I also tried to use document.getReady instead of window onload but the error still occurs. Any idea why is this? 

window.onload = function() {
  //video
  var video = document.getElementById("video-container__video");
  //Buttons 
  var playButton = document.getElementById("video-controls__play-pause");
  var muteButton = document.getElementById("video-controls__mute");
  var fullScreenButton = document.getElementById("video-controls__full-screen");

  //sliders
  var seekbar = document.getElementById("video-controls__seek-bar");
  var volumebar = document.getElementById("video-controls__volume-bar");

  //event listener for the play and pause button

  playButton.addEventListener("click", function() {
    if (video.paused == true) {
      video.play();

      //button text will change to Pause
      playButton.innerHTML = "Pause";
    } else {
      //pause the video
      video.pause();
      //button will update its text to play
      playButton.innerHTML = "Play";
    }
  });
}
<div class="video-container">
    <!-- Video -->
    <video class="video-container__video" width="640" height="365">
      <source src='_assets/media/big_buck_bunny.mp4' type='video/mp4'>
    </video>
<div id="video-controls">
  <button type="button" id="video-controls__play-pause">Play</button>
  <input type="range" id="video-controls__seek-bar" value="0">
  <button type="button" id="video-controls__mute">Mute</button>
  <input type="range" id="video-controls__volume-bar" min="0" max="1" step="0.1" value="1">
  <button type="button" id="video-controls__full-screen">Full-Screen</button>
</div>

Upvotes: 1

Views: 2424

Answers (4)

FZs
FZs

Reputation: 18619

The problem is, that your video element has a class video-container__video, while you try to access it by ID.

This results in video being null, and you get an error, when you try to read the paused property of it.

Ways to fix the problem:

  1. Change the class to an ID! Classes intended to create 'groups' of similar elements, not for identifying a single element. Or:

  2. If you have only one element with that class, change this line:

    var video=document.getElementById("video-container__video")

    to either of the following:

    var video=document.getElementByClassName("video-container__video")[0]

    Or:

    var video=document.querySelector(".video-container__video")

  3. If you had more than one elements with that class, you would have to use a loop (but that's probably not the case...):

    var videos=document.getElementByClassName("video-container__video")

for(video of videos){
    //Do something with each element
}

Upvotes: 3

SAF
SAF

Reputation: 71

Did you try and print what playButton holds? It says there is a type error and there must be something you are missing i.e. accessing wrong ids/classes. Just try and print what it contains and check the variable and elements you are trying to access the element from. Try change the class to id in the main video element

Upvotes: 0

Mina
Mina

Reputation: 11

you should change the video html element class="video-container__video" to id="video-container__video" because you can't pass class to getElementById and you should only pass Id to it. this explains the null reference error

Upvotes: 0

Goran Stoyanov
Goran Stoyanov

Reputation: 2311

The problem is that you are trying to get the video by id but it has a class. Try with:

var video = document.querySelector(".video-container__video");


window.onload = function() {
  //video
  var video = document.querySelector(".video-container__video");
  console.log(video);
  //Buttons 
  var playButton = document.getElementById("video-controls__play-pause");
  var muteButton = document.getElementById("video-controls__mute");
  var fullScreenButton = document.getElementById("video-controls__full-screen");

  //sliders
  var seekbar = document.getElementById("video-controls__seek-bar");
  var volumebar = document.getElementById("video-controls__volume-bar");

  //event listener for the play and pause button

  playButton.addEventListener("click", function() {
    if (video.paused == true) {
      video.play();

      //button text will change to Pause
      playButton.innerHTML = "Pause";
    } else {
      //pause the video
      video.pause();
      //button will update its text to play
      playButton.innerHTML = "Play";
    }
  });
}
<div class="video-container">
  <!-- Video -->
  <video class="video-container__video" width="640" height="365">
      <source src='_assets/media/big_buck_bunny.mp4' type='video/mp4'>
    </video>
  <div id="video-controls">
    <button type="button" id="video-controls__play-pause">Play</button>
    <input type="range" id="video-controls__seek-bar" value="0">
    <button type="button" id="video-controls__mute">Mute</button>
    <input type="range" id="video-controls__volume-bar" min="0" max="1" step="0.1" value="1">
    <button type="button" id="video-controls__full-screen">Full-Screen</button>
  </div>

Upvotes: 1

Related Questions