• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Video set to loop doesn't loop when uploaded to server

Engaged ,
Jul 08, 2019 Jul 08, 2019

Copy link to clipboard

Copied

LoopVidproblem.png

video is an .mp4

Views

6.4K

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

Community Expert , Jul 10, 2019 Jul 10, 2019

I think we've had a similiar dicussion on these forums before . Autoplay muted is the default policy on a lot of devices as Jon says and then on some devices it may not autoplay at all, so you may need controls as a fallback so the user can manually start the video.  Something like this:

<video playsinline autoplay loop muted controls>

     <source type="video/mp4" src="/video/test.mp4>

     <source type="video/webm" src="video/test.webm">

</video>

Would an extension like this be any use to you:  Video Background Magic

...

Votes

Translate

Translate
Community Expert ,
Jul 08, 2019 Jul 08, 2019

Copy link to clipboard

Copied

There are a couple things I can see here...

1. In the HTML5 <video> tag, attributes like controls, autoplay and loop are now boolean. Simply by existing in the video tag, they are considered "on", so you should be using simply...

<video autoplay loop>

2. It may also be because you're confusing the browser by using an html5 <video> tag in an XHTML 1.0 document. <video> did not exist under XHTML 1.0, back then, we were forced to use the old <object><embed> method of adding video. Mixing new tags and old doctypes can cause all kinds of issues.

In the Page Properties go to the Title/Encoding section and change the Document Type (DTD) to HTML 5, save and re-upload.

3. It's also possible the browser you're testing in simply won't loop. Some mobile browsers just won't do it because autoplay and loop will kill data plans.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Engaged ,
Jul 08, 2019 Jul 08, 2019

Copy link to clipboard

Copied

Ah Now we are getting somewhere!

At first I had a video up on a .php page for about a year, looped fine. Then it stopped looping. i tried to re load the mp4 but same problem.

Then I did a new test video and the same problem again. Then finally tried on one of my Go daddy pages and STILL same problem.

then I checked controls and re uploaded and it now loops but I have to start manually with controls.

Dont want to do that!

Need the video to autoplay and loop by itself.

Plz advize R

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Engaged ,
Jul 08, 2019 Jul 08, 2019

Copy link to clipboard

Copied

php source

<?php

include('header.php');

?>

    <tr>

        <td>

      

      

    <table border="0" cellpadding="8" cellspacing="0" class="body1darkgray">

  

     <tr>

      <td><span class="reel"><a class="fvdo" href="video.php?v=VideoNew_mp4/REEL 2016SameSource.mp4"></a></span></td>

    </tr><tr>

        <td width="986" height="450

        "><img src="images/spacer.gif" alt=""  />

          <video width="1280" height="720" title="Frontpageteaser" preload="none" controls="controls" autoplay="autoplay" loop="loop" >

            <source src="VideoNew_mp4/FRONT PAGE TEASERBQ.mp4" type="video/mp4" />

          </video></td>

    </tr>

  

    </table>

      </td>

        </tr>

<?php

include('footer.php');

?>

Php header

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

 

<link rel="stylesheet" type="text/css" href="css/style.css">

<link rel="stylesheet" type="text/css" href="css/ddsmoothmenu.css" />

<script type="text/javascript" src="js/jquery.min.js"></script>

<script type="text/javascript" src="js/ddsmoothmenu.js">

/***********************************************

* Smooth Navigational Menu- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)

* This notice MUST stay intact for legal use

* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code

***********************************************/

</script>

<script type="text/javascript">

ddsmoothmenu.init({

    mainmenuid: "smoothmenu1", //menu DIV id

    orientation: 'h', //Horizontal or vertical menu: Set to "h" or "v"

    classname: 'ddsmoothmenu', //class added to menu's outer DIV

    //customtheme: ["#1c5a80", "#18374a"],

    contentsource: "markup" //"markup" or ["container_id", "path_to_menu_file"]

})

ddsmoothmenu.init({

    mainmenuid: "smoothmenu2", //Menu DIV id

    orientation: 'v', //Horizontal or vertical menu: Set to "h" or "v"

    classname: 'ddsmoothmenu-v', //class added to menu's outer DIV

    method: 'toggle', // set to 'hover' (default) or 'toggle'

    arrowswap: true, // enable rollover effect on menu arrow images?

    //customtheme: ["#804000", "#482400"],

    contentsource: "markup" //"markup" or ["container_id", "path_to_menu_file"]

})

</script>

<?php include('body_header.php'); ?>

<link rel="stylesheet" href="nivo-lightbox.css" type="text/css" />

<link rel="stylesheet" href="themes/default/default.css" type="text/css" />

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

<script src="nivo-lightbox.min.js"></script>

<script>

$(document).ready(function(){

$('.fvdo').nivoLightbox({

    beforeHideLightbox: function(){

        $(".nivo-lightbox-content iframe").remove();

    }

});

});

</script>

  

</head>

<body>

    <table border="0" cellpadding="0" cellspacing="0" class="body1darkgray" align="center" width="1000px">

    <tr>

        <td><img src="images/sub_top1.jpg" width="1000" height="75" alt="" border="0"></td>

    </tr>

    <tr>

        <td><img src="images/sub_mid.jpg" width="1000" height="76" alt="" border="0"></td>

    </tr>

    <tr>

        <td id="smoothmenu1" class="ddsmoothmenu menubackground">

           <ul>

                <li><a href="./" title="Home">Home</a></li>

                <li><a href="bio.php" title="Bio">Bio</a></li>

                <li><a href="clips_commercials.php" title="Commercials">Commercials</a></li>

                <li><a href="clips_videos.php" title="Music Videos">Music Videos</a></li>

                <li><a href="clips_shorts.php" title="Films">2nd Unit D.P.</a></li>

             

                <li><a href="contact.php" title="Contact">Contact</a></li>

          </ul><br style="clear: left" />

        </td>

    </tr>

    <!--  header end here -->

        <!--  content start here -->

SAFARI AND CHROME BROWSERS

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jul 08, 2019 Jul 08, 2019

Copy link to clipboard

Copied

It may still be a doctype mismatch, the <video> tag itself didn't exist before HTML5 and you appear to be using HTML4 Transitional. That's definitely something to check. Giving browsers a mixed bag of code can result in strange occurrences in various devices.

The html5 doctype declaration is just...

<!doctype html>

You would then strip the attributes of the <video> tag down to their correct boolean counterparts...

     <video width="1280" height="720" title="Frontpageteaser" controls autoplay loop>

          <source src="VideoNew_mp4/FRONT PAGE TEASERBQ.mp4" type="video/mp4" />

     </video>

The preload attribute is ignored if autoplay is used, so that should be taken out.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Jul 08, 2019 Jul 08, 2019

Copy link to clipboard

Copied

For autoplay, the policy was changed in 2018 for Chrome, and other browsers followed some time later, see -

https://developers.google.com/web/updates/2017/09/autoplay-policy-changes

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jul 08, 2019 Jul 08, 2019

Copy link to clipboard

Copied

matthewdee  wrote

then I checked controls and re uploaded and it now loops but I have to start manually with controls.

Dont want to do that!

Need the video to autoplay and loop by itself.

Who are you creating this site for  -- yourself or your site visitors?  Owing to the sharp spike in autoplay blockers, most people don't like autoplay.  And if autoplay blockers are used, chances are your site visitors will never know there is a video on the site unless you provide controls for them to invoke the  player.  So you need to decide what is important.  If autoplay & loop are necessary for the site but only work for 30% of users, you'll need a fallback plan for the remaining 70% of users.  Or you could just build your site with controls and effectively reach everyone.  Your choice.

Also don't use spaces in file names.  It's invalid HTML5 code.  You can use underscores_ or hyphens - but no spaces or special characters allowed.

FRONT_PAGE_TEASERBQ.mp4

FRONT-PAGE-TEASERBQ.mp4

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Engaged ,
Jul 08, 2019 Jul 08, 2019

Copy link to clipboard

Copied

See that autoplay enabling will only play video not audio, so I had to set video with control underneath so viewer can unmute audio.

Thx

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jul 10, 2019 Jul 10, 2019

Copy link to clipboard

Copied

Muted Autoplay is just the way it works now in Chrome (and soon, very likely, all browsers).

There's no code to fix it, the browser itself is what's keeping it from functioning the way you'd like.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jul 10, 2019 Jul 10, 2019

Copy link to clipboard

Copied

LATEST

I think we've had a similiar dicussion on these forums before . Autoplay muted is the default policy on a lot of devices as Jon says and then on some devices it may not autoplay at all, so you may need controls as a fallback so the user can manually start the video.  Something like this:

<video playsinline autoplay loop muted controls>

     <source type="video/mp4" src="/video/test.mp4>

     <source type="video/webm" src="video/test.webm">

</video>

Would an extension like this be any use to you:  Video Background Magic

Paul-M - Community Expert

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jul 08, 2019 Jul 08, 2019

Copy link to clipboard

Copied

What code do you have now (just copy and paste here, no need for an image of it) and which browser isn't autoplaying?

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines