Uppah Uppah - 3 months ago 9
Javascript Question

HTML5 video doesn't play in Chrome

So I have a website, which I just use for fun, but I currently have a problem with the website (uppah.net)

I'm simply trying to play a video on the website, but it doesn't show up on Chrome. It works fine on Microsoft Edge and Internet Explorer.

I've read that Google Chrome doesn't support MP4, so I tried to change the video formats into WebM, but with the same result.

I'm using the following code:

<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Uppah</title>
<link href="style.css" rel="stylesheet" />
<link href="FCNTiGM.gif" rel="shortcut icon" />

<script>
function load() {
document.getElementById("vsrc").src = Math.floor((Math.random()*11)+1)+".mp4";
}
</script>

</head>
<body onload="load()">
<div id="wrapper">
<video autoplay class="video" loop><source id="vsrc" /> Please update your browser.</video>
</div>


<div id="polina">
<h1>Uppah</h1>

<p><a href="http://steamcommunity.com/id/Uppahmost" target="_blank">Steam Profile</a></p>
&nbsp;

<p>You won&#39;t find any hacks here, noob. :^)&nbsp;</p>
</div>
</body>
</html>


I've tried to change:

<script>
function load() {
document.getElementById("vsrc").src = Math.floor((Math.random()*11)+1)+".mp4";
}
</script>


Into

<script>
function load() {
document.getElementById("vsrc").src = Math.floor((Math.random()*11)+1)+".webm";
}
</script>


But it doesn't play.

Answer

Why don't you append to the wrapper div the whole video element like this

function load() {
  var src = Math.floor((Math.random()*11)+1)+".mp4";
  var wrapper = document.getElementById("wrapper");
  wrapper.innerHTML = '<video autoplay class="video" id="video" loop><source src="'+src+'" type="video/mp4" /> Please update your browser.</video>';
}
<html>
  <head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
    <title>Uppah</title>
    <link href="style.css" rel="stylesheet" />
    <link href="FCNTiGM.gif" rel="shortcut icon" />

  </head>
  <body onload="load()">
    <div id="wrapper">

    </div>
    <div id="polina">
      <h1>Uppah</h1>

      <p><a href="http://steamcommunity.com/id/Uppahmost" target="_blank">Steam Profile</a></p>
      &nbsp;

      <p>You won&#39;t find any hacks here, noob. :^)&nbsp;</p>
    </div>
  </body>
</html>

Here is a working example (just hit "Run with JS" button in the output section): http://jsbin.com/kabibifoqo/edit?html,js,output