HTML5 - File name not working in media player

Question

Ok so there is this amazing video player called plyr.io

I was so impressed by it and I downloaded it from Github and everything, I barely know code. I am early into the html and css. I know NOTHING about javascript. Anyways after downloading it and everything, I got to this point.

<!DOCTYPE html>
<html lang="en" >

<head>
<meta charset="UTF-8">
<title>Plyr Demo</title>
<link rel='stylesheet' href='https://cdn.plyr.io/3.4.6/plyr.css'>
  <style>
  .container {
    max-width: 800px;
    margin: 0 auto;
  }
  .plyr {
    border-radius: 4px;
    margin-bottom: 15px;
  }
  </style>
</head>

<body>
<div class="container">
<video controls crossorigin playsinline 
poster="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer- 
HD.jpg" id="player">
              <!-- Video files -->

            <source 
  src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer- 
     720p.mp4" type="video/mp4" size="720">


              <!-- Caption files -->
              <track kind="captions" label="English" srclang="en" 
      src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer- 
    HD.en.vtt"
                  default>
              <track kind="captions" label="Français" srclang="fr" 
     src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer- 
     HD.fr.vtt">

              <!-- Fallback for browsers that don't support the <video> 
     element -->
              <a 
      href="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer- 
     576p.mp4" download>Download</a>
          </video>


  <script src='https://cdn.plyr.io/3.4.6/plyr.js'></script>



<script  type="text/javascript">
document.addEventListener('DOMContentLoaded', () => {
  // This is the bare minimum JavaScript. You can opt to pass no arguments 
  to setup.
  const player = new Plyr('#player');

  // Expose
  window.player = player;

  // Bind event listener
  function on(selector, type, callback) {
    document.querySelector(selector).addEventListener(type, callback, 
  false);
  }

  // Play
  on('.js-play', 'click', () => {
    player.play();
  });

  // Pause
  on('.js-pause', 'click', () => {
    player.pause();
  });

  // Stop
  on('.js-stop', 'click', () => {
    player.stop();
  });

  // Rewind
  on('.js-rewind', 'click', () => {
    player.rewind();
  });

  // Forward
  on('.js-forward', 'click', () => {
    player.forward();
  });
});

  </script>
  </body>

    </html>

But when I actually try to replace

https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer- 
720p.mp4

Whenever I replace it with a video link of my own, The video player just doesn't work, I have tried so many things and it just wouldn't work unless its the actual video of plyr.io

its free to use meaning the code doesn't violate copyright, tell me if i am wrong. the website link is (https://plyr.io/#video)

if you use the path to the video you're using in the HTML just in the browser address does it work? is the video correctly encoded to play in an HTML5 video player? — Offbeatmammal
I am pretty sure there is nothing wrong with the video and if I paste it a alone in chrome, it plays fine. But something I have realised is that the video link the original code uses, once I paste that in chrome, it doesnt work, in fact it gives me some sort of error message or some text or something. — Khaled Hawileh
if you can share the error message that would help. Even better would be to post a sample on jsfiddle.org or similar so we can see the problem — Offbeatmammal

VC.One VC.One · Accepted Answer · 2018-12-27T12:30:19

"Whenever I replace it with a video link of my own, The video player just doesn't work,
I have tried so many things..."

Keep your link as one line (eg: Don't break the file name with Enter to put some text on a new line. No new line after "Trailer-" text).
You cannot have empty spaces like (see grey area in below link's wording):

src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-720p.mp4"

The correct link is:

src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-720p.mp4"

So when you say (not working):

But when I actually try to replace:
https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer- 
720p.mp4

Correct way should be:

But IT WORKS when I actually try to replace:
https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-720p.mp4

HTML5 - File name not working in media player

1 Answers