Hi, how can we help you?

How to debug playback issues?

Introduction

If you are having issues with playing videos on your website, this is usually due to (in order of commonality): 

  • An internet issue unique to your computer
  • A firewall issue on your campus that is blocking the video
  • A video server issue (a temporary issue preventing the video from being played)

Most browsers have tools that can be used to easily identify the cause of the issue. We outline two of these here (1) the developer console and (2) the network tab. If you are able to run these reports on your browser and send through the information to support@kanopystreaming.com, we will be able to most quickly diagnose any issues you have.

PROCESS 1) The Developer Console

The developer console will tell you if any execution or Javascript error has happened on the page:

In Chrome

  1. Open the developer console by pressing the following keys simultaneously: Ctrl + Shift + J (on Windows/Linux) or Ctrl + Option + J (on Mac)
  2. You should see a new panel opening at the bottom of your screen.
  3. Make sure that the tab "console" is selected, and press play on the Kanopy film
  4. If this panel contains red lines, they likely point to the source of the issue. See example below: 
  5. Take a screenshot of any red lines in this panel, or copy/paste the content in an email
  6. Send this information to us in an email

Find more details on how to use the Chrome console here.

In Firefox

  1. Open the developer console by pressing the following keys simultaneously: Ctrl + Shift + K (on Windows/Linux) or Ctrl + Option + K (on Mac)
  2. You should see a new panel opening at the bottom of your screen.
  3. Make sure that the tab "console" is selected, and press play on the Kanopy film
  4. If this panel contains red lines, they likely point to the source of the issue. See example below:
  5. Take a screenshot of any red lines in this panel, or copy/paste the content in an email
  6. Send this information back to us

Find more details on how to use the Firefox console here.

In IE (Version 8 and above)

  1. Open the console by pressing the key "F-12"
  2. You should see a new panel opening at the bottom or on the side of your screen.
  3. Make sure that the tab "console" is selected, and press play on the Kanopy film
  4. If this panel contains red lines, they likely point to the source of the issue. See example below:
  5. Take a screenshot of any red lines in this panel, or copy/paste the content in an email
  6. Send this information back to us

Note: The UI (User Interface) has changed several times between Internet Explorer 8 and Microsoft Edge, so the console you see might not look exactly like the one above, however it should work the same way. Find more details on how to use the Internet Explorer console here.

 

PROCESS 2) The Network Tab

The "network tab" will list everything loaded in the current page (i.e. every document, image, styling file, javascript file, icon, etc that are composing the page will be listed there).

In Chrome

  1. Open the developer console by pressing the following keys simultaneously: Ctrl + Shift + J (on Windows/Linux) or Ctrl + Option + J (on Mac)
  2. You should see a new panel opening at the bottom of your screen.
  3. Make sure that the tab "network" is selected, and press play on the Kanopy film
  4. If this panel contains red lines, they likely point to the source of the issue. See example below: 
  5. Take a screenshot of any red lines in this panel
  6. Send this information back to us

Find more details on how to use the Chrome network tab here.

In Firefox

  1. Open the developer console by pressing the following keys simultaneously: Ctrl + Shift + K (on Windows/Linux) or Ctrl + Option + K (on Mac)
  2. You should see a new panel opening at the bottom of your screen.
  3. Make sure that the tab "network" is selected, and press play on the Kanopy film
  4. If this panel contains red lines, they likely point to the source of the issue. See example below:
  5. Take a screenshot of all the red lines in this panel, or copy/paste the content in an email
  6. Send this information back to us

Find more details on how to use the Firefox network tab here.

In IE (Version 8 and above)

  1. Open the console by pressing the key "F-12"
  2. You should see a new panel opening at the bottom or on the side of your screen.
  3. Make sure that the tab "network" is selected, and press play on the Kanopy film
  4. If this panel contains red lines, they likely point to the source of the issue. See example below:
  5. Take a screenshot of all the red lines in this panel, or copy/paste the content in an email
  6. Send this information back to us

Note: The UI (User Interface) has changed several times between Internet Explorer 8 and Microsoft Edge, so the network tab you see might not look exactly like the one above, however it should work the same way. Find more details on how to use the Internet Explorer network tab here.

 

Was this article helpful?
0 out of 2 found this helpful
Have more questions? Submit a request

Comments

Follow