Welcome to TalkGraphics.com
Results 1 to 6 of 6

Thread: Loop MP4

  1. #1

    Default Loop MP4

    Hi all
    Could someone please take a look at this.xar file and tell me how to make the movie at the top of the page continuously loop, and also explain why it doesn't auto start in Chrome.
    You can see it here: actionitcs.com/realtime/
    Thanks in advance
    Attached Files Attached Files

  2. #2

    Default Re: Loop MP4

    Quote Originally Posted by actionit View Post
    Hi all
    Could someone please take a look at this.xar file and tell me how to make the movie at the top of the page continuously loop, and also explain why it doesn't auto start in Chrome.
    You can see it here: actionitcs.com/realtime/
    Thanks in advance
    FIRST: As to Chrome... and auto-start videos.... it's a security issue with them and you have disable it... a quick search on Google will settle that. Although not helpful to 'other' viewsers
    of your website who just won't see the video... there may be a 'code' work-around for it...

    This is what I'm using to do just what you said for the banner video in this website...

    http://specialtydesserts.com/

    don't ask me to explain... I don't know what the heck 75% means?

    <!DOCTYPE html>
    <html>
    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    </head>


    <style>
    * {
    box-sizing: border-box;
    }


    body {
    margin: 0;
    }


    #myVideo {
    position: fixed;
    right: 0;
    top: 0;
    min-width: 100%;
    min-height: 100%;
    <! Changed 100% to auto to fit video height or leave at 100% to fill browser
    }
    </style>


    <video oncontextmenu="return false;" autoplay muted loop id="myVideo"> video controls loop
    <source src="index_htm_files/website header video converted.mp4"
    " type="video/mp4">
    oncontextmenu="return false;"
    Your browser does not support HTML5 video.
    </video>


    </body>


    </html>

  3. #3
    Join Date
    Mar 2009
    Posts
    3,303

    Default Re: Loop MP4

    It autostarts in Chrome here.

  4. #4
    Join Date
    Apr 2018
    Location
    London
    Posts
    32

    Default Re: Loop MP4

    You can achieve autoplay loop by opening the Xara video widget HTML body and adding the words "muted loop" after "autoplay". Chrome will not 'autostart' if your video has a soundtrack, but even if it does not, I use 'muted' so Chrome starts the video without question.

    By using the standard Xara widget, you have the video controls that come with it, but if you want to default to Chrome only video controls, you can insert code into a placeholder to achieve exactly the same outcome; you do however need to manually calculate the position you want the video to appear on the page, and how it behaves when you resize your browser. Here is the example code in action https://video.initiostar.co.uk/autoplay.htm along with codes for a video fill browser, full width video banner, and page width video.

    The XAR file is attached (you need to change the video source to see it in action. There are though multiple ways to code the outcome, depending on how you want the video to resize when you resize a browser.

    Hopefully, this helps you.

    Best,

    Gary
    Attached Files Attached Files

  5. #5
    Join Date
    Aug 2000
    Location
    Harwich, Essex, England
    Posts
    18,850

    Default Re: Loop MP4

    Actionit, it doesn't work for me in Chrome. However, in other browsers, I find that the video is wider than my browser if I'm not viewing at full screen, which I rarely do, so the video loads off-centre and the right side of the video is cut off. (See screen gab)

    Using Initiosar (Gary) supplied examples I've managed to reduce the video placeholder to fit within your websites page's 1120 size. It works fine in FF, Chrome, IE11, Edge & Opera. However for some reason the video is slow to load on FF, perhaps because it's loading from your server, but this isn't the case in the other browsers.

    One other thing I'd mention is that the video file your using is approx 1648px x 928 px but to fit within your webpage it's reduced to 690px x 388px so I'd consider creating a smaller video file to speed up loading time.

    I attached my xar file based on Gary's coding.
    Attached Thumbnails Attached Thumbnails Click image for larger version. 

Name:	export.jpg 
Views:	6 
Size:	80.5 KB 
ID:	124286  
    Attached Files Attached Files
    Egg

    Intel i7 - 4790K Quad Core + 16GB Ram + 232 GB SSD + 250 GB SSD portable drive
    Xara Designer Pro X 16

  6. #6

    Default Re: Loop MP4

    Thank you everyone for your invaluable help again. Works great thanks Gary and Egg

 

 

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •