HTML 5 Video problems

Question

I have a webpage with a full-screen html5 video (width & height 100%) and if i open the webpage, the video does not play. But if i rightclick and then open video in new tab. then the video plays. and if i then reload my webpage then the video plays normal. I thought that was the problem but if i close my webpage and reopen it i have the same problem. Please help?

My code: index.html:

<!DOCTYPE html>
<html lang="en-US"> 
  <head>
    <link rel="icon" type="image/png" href="./assets/loadingSim_icon64x64.png" />
    <script src="https://kit.fontawesome.com/3a05f4171b.js" crossorigin="anonymous"></script>
    <title>Loading Simulator</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="intro.css">
    <script src="intro.js"></script> 
    </head><body onmousedown='return false' onselectstart='return false' style="cursor: none;">
      <!--<img src="./assets/loadingSimIntro.gif" width="100%" height="100%">-->
      <video autoplay class="vid" preload="auto">
        <source src="./assets/bpLoadingSimIntroFull.mp4" type="video/mp4">
      </video>
    </center>
  </body>
</html>

intro.css:

@import url('https://fonts.googleapis.com/css2?family=Varela+Round&display=swap');
* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    font-family: 'Varela Round', sans-serif;
}
  body {
    margin:0px;
    /*background-image: url('/assets/loadingSimIntro.gif');*/
    background-size: cover;
    overflow: hidden;
}
  .vid{
    /*position: fixed;
    min-width: 100%; 
    min-height: 100%;
    */
    -webkit-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    -o-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
  }

note: intro.js handles only the time, so if the vid has played it continues to the next page. it has nothing to do with my question — BeldrNL, Jul 28 '20 at 10:23
Does this answer your question? [Video auto play is not working in Safari and Chrome desktop browser](https://stackoverflow.com/questions/17994666/video-auto-play-is-not-working-in-safari-and-chrome-desktop-browser) — Ali Sheikhpour, Jul 28 '20 at 10:41
Why you don't use videos play plugin? They are compiled and much better...? — SoliMoli, Jul 28 '20 at 10:48

Yogendra Chauhan · Answer 1 · 2020-07-28T12:41:46.843

0

The following code is working as expected. This video will auto play.

video {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
}

<video controls autoplay="autoplay" preload="auto" muted>
      <source src="https://www.w3schools.com/tags/movie.mp4" type="video/mp4">
      <source src="https://www.w3schools.com/tags/movie.ogg" type="video/ogg">
    </video>

edited Jul 28 '20 at 12:41

answered Jul 28 '20 at 11:51

Yogendra Chauhan

805
5
15

it does not work. i see a black box on my screen, nothing more – BeldrNL Jul 28 '20 at 12:14
In Which browser you are accessing it? This code will run on all modern browsers, It is working fine in Firefox. Add **muted** attribute & try, if it works. – Yogendra Chauhan Jul 28 '20 at 12:34
im using google chrome. And it worked with the mute attribute. But i need the sound too. And if i use an other audio tag then the music is not synced with the video – BeldrNL Jul 30 '20 at 08:12
No don't use separate audio tag, it will not work. All you need to write javascript code to play the video with sound on initial page load, you can increase video volume through javascript. – Yogendra Chauhan Jul 30 '20 at 10:48

score 0 · Accepted Answer · answered Jul 30 '20 at 08:15

0

I have done it without a video. Its no longer needed but thanks for the help!!

answered Jul 30 '20 at 08:15

BeldrNL

53
9

HTML 5 Video problems

2 Answers2