Skip navigation
Currently Being Moderated

Need some help with video

Jan 10, 2014 11:00 AM

Hola
Someone give a video to post on the web
but the video start as soon as the page load
I don't know ANYTHING ABOUT VIDEO,()
How can I make it NOT TO START until someone play it?
Is this possible?
Thanks

 

 

The video is a mp4
I'm using DW CC

 
Replies
  • Currently Being Moderated
    Jan 10, 2014 11:11 AM   in reply to Daniel Ulysses

    Remove "AUTOPLAY" from your controls.

     

    NOTE:  you need 3 file types to support the various browsers & devices. 

    • MP4 or M4V for web
    • OGG
    • WEBM

     

    Use Miro Video Converter

    http://www.mirovideoconverter.com/

     

    Below is what your HTML code should look like.  Change yourvideo to your actual  path and file name.

     

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>HTML5 with Video</title>
    
    <!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    </head>
    <body>
    
    <!--begin video-->
    <video controls>
    <source src="yourvideo.mp4" type="video/mp4">
    <source src="yourvideo.webm" type="video/webm">
    <source src="yourvideo.ogv" type="video/ogg">
    NOTE: If you see this, you're using an outdated browser 
    that doesn't support the video tag.
    </video>
    <!--end video-->
    
    </body>
    </html>

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Jan 12, 2014 3:43 PM   in reply to Daniel Ulysses

    That's not HTML5 video.  That's Vimeo.  Not the same thing at all.

    You can set the embed variables on Vimeo's site.

    http://vimeo.com/7449107#embed

     

    When previewing in browsers, be sure to clear your browser's cache with F5 or Ctrl+R.

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Jan 12, 2014 4:16 PM   in reply to Daniel Ulysses

    You're mixing Apples with Oranges.  HTML5 video doesn't need an iframe.  It's actually better if you don't use one.   Videos from sharing sites like Vimeo and YouTube are totally different & not a worthy substitute for testing purposes.

     

    Can you show us a link to your test page so far.

     
    |
    Mark as:
  • Currently Being Moderated
    Jan 12, 2014 4:31 PM   in reply to Daniel Ulysses

    Some companies will not allow any content from YouTube or Vimeo to be played in their browsers, because they figure that, if you are watching YouTube or Vimeo videos, you're not working.

     

    In this case, the only decent solution is to host the video on your server. While Flash is a viable method, it will never play on mobile devices. Additionally, many modern browsers don't have the Flash plugin. So the right solution is to use HTML5 and host it yourself.

     

    Now, Nancy likes PicklePlayer: http://www.pickleplayer.com/

     

    You need to purchase it in order to make it work for your website, but it will absolutely work with 100% of the browsers out there.

     

    The other (and free) way to deal with this is to transcode your video into:

    .M4V

    .OGG

    .WebM

     

    And to call whichever will work with the client browser. Additionally, you have to include the MIME types that your server may not understand (usually OGG Theora).

     

    Here is how to do HTML5 video in your web page:

     

    <video width="640" height="480" controls preload="metadata" poster="path-to/your-poster.jpg">

      <source src="path-to/your-movie.mp4" type='video/mp4; codecs="avc1.42E01E, H.264"'>

      <source src="path-to/your-movie.theora.ogv" type='video/ogg; codecs="theora, vorbis"'>

      <source src="path-to/your-movie.webm" type='video/webm; codecs="vp8, vorbis"'>

     

      </video>

     

    Now, please understand, this presupposes that the video is standard 640x480 video and not high-def or 16:9 widescreen. You would make the dimensions match what the video size really is. You can make the poster out of anything, a frame from the movie or something else entirely.

     

    Here is a link to a page that does what I am describing here:

     

    http://ghostsofnewengland.org/

     

    Go down to the bottom of the page and you'll see the video. Look at the sourcecode in your browser and see how it works.

     

    Now, with respect to MIME types. If you have a Linux/Apache server, you may need to edit your .htaccess file thusly:

     

    Download .htaccess, which should be in your root folder for your website (if not, create one) and add these lines:

     

    AddType audio/ogg .oga

    AddType video/ogg .ogv

    AddType application/ogg .ogg

    AddHandler application-ogg .ogg .ogv .oga

     

    If you are on a Windows Server, you may have to use your control panel to do this. Also, many Linux/Apache servers have a control panel option for adding MIME types.

     

    -Mark

     
    |
    Mark as:
  • Currently Being Moderated
    Jan 12, 2014 4:41 PM   in reply to Daniel Ulysses

    In the meantime, I found a set of test files to use instead of Vimeo. 

    Drop this code inside your slider without any iframe and it should work.

     

     

    <!--begin video-->
    <video controls >
    <source src="http://techslides.com/demos/sample-videos/small.webm" type="video/webm">
    <source src="http://techslides.com/demos/sample-videos/small.ogv" type="video/ogg">
    <source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
    NOTE: If you see this, you're using an 
    outdated browser that doesn't support 
    the video tag. </video>
    <!--end video-->

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Jan 12, 2014 5:13 PM   in reply to Daniel Ulysses

    It looks to me that you have created the following for video in your web page:

     

    <div src='images/assets/lp_out.mp4' width='520' height='300' style='width:520px;height:300px;'><video controls></video></div>

     

    And your beginning declaration is not HTML5, but a mix of HTML5 and XHTML:

     

    <!DOCTYPE html>

    <!--[if IE 7 ]><html class="ie7" lang="en"><![endif]-->

    <!--[if IE 8 ]><html class="ie8" lang="en"><![endif]-->

    <!--[if IE 9 ]><html class="ie9" lang="en"><![endif]-->

    <!--[if (gte IE 10)|!(IE)]><!--><html xmlns="http://www.w3.org/1999/xhtml" lang="en-US"><!--<![endif]-->

     

    For HTML5 (and to make video work) you need the following:

     

    <!DOCTYPE HTML>

    <html>

     

    That's it.

     

    -Mark

     
    |
    Mark as:
  • Currently Being Moderated
    Jan 12, 2014 7:09 PM   in reply to Daniel Ulysses

    You did not upload the video to your page and you did not upload the changes in your page for us to see what is happening. Please let us know when you have done that.

     

    -Mark

     
    |
    Mark as:
  • Currently Being Moderated
    Jan 13, 2014 5:29 AM   in reply to Daniel Ulysses

    i have big problem this look web site : wordpress temalar

     
    |
    Mark as:
  • Currently Being Moderated
    Jan 13, 2014 6:16 AM   in reply to Daniel Ulysses

    OK, here is what I see:

     

    <video controls >

                                            <div><source src="images/assets/lp_out.webm" type="video/webm">

                                            <source src="images/assets/lp_out.ogv" type="video/ogg">

                                            <source src="images/assets/lp_out.mp4" type="video/mp4"></div>

                                            NOTE: If you see this, you're using an

                                            outdated browser that doesn't support

                                            the video tag. </video>

     

    Can you tell me why you have the div there?

     

    If you are trying to wrap the video in a div tag, wouldn't it be:

     

    <div class="video">

    <video controls preload="metadata" poster="path-to/your-poster.jpg">

    <source src="images/assets/lp_out.mp4" type='video/mp4; codecs="avc1.42E01E, H.264"'>

    <source src="images/assets/lp_out.ogv" type='video/ogg; codecs="theora, vorbis"'>

    <source src="images/assets/lp_out.webm" type='video/webm; codecs="vp8, vorbis"'>

    NOTE: If you see this, you're using an outdated browser that doesn't support the video tag.

    </video>

    </div>

     

    And please understand that the order of which you offer the browser is very important. You need to do .mp4 (or .m4v) first, then .ogg, then .webm. Do not mix that order up, else some browsers will display the video and others simply won't.

     

    Last, but not least, you have not fixed your doctype as I recommended above. So your web page is still not HTML5.

     

    -Mark

     
    |
    Mark as:
  • Currently Being Moderated
    Jan 13, 2014 10:53 AM   in reply to Daniel Ulysses

    You need to follow what I gave you.

     

    To hold the video there, you can create a div container that will style the video and put it where you want it.

     

    I have given you the correct HTML code for that and in the correct order.

     

    In your Stylesheet, you can place the video where you want it by creating styles:

     

    .video {

         margin-left: 160px

         margin-top: 95 px;

         opacity: 0;

         -webkit-transition: opacity 2s ease-in;

         -moz-transition: opacity 2s ease-in;

         -o-transition: opacity 2s ease-in;

         -ms-transition: opacity 2s ease-in;

         transition: opacity 2s ease-in;

    }

     

    This will cause the video to transition in like you want it to. You can even create a framed border.

     

    -Mark

     
    |
    Mark as:
  • Currently Being Moderated
    Jan 13, 2014 11:35 AM   in reply to Daniel Ulysses
     
    |
    Mark as:
  • Currently Being Moderated
    Jan 14, 2014 12:52 AM   in reply to Daniel Ulysses

    You will need to add to your style rule for the video the height and width properties in px, or becuase it is a responsive site, in %. You should also add the height and width attributes to the video tag:

    <video width="320" height="240" controls>

    This will fix the size of the video container and the video itself to whatever you wish.

    I would also recommend you create the video to be the exact maximum size the video will appear in your site (ie, dont upload a video of 1080px that will only appear 320px) so that users dont have to download a large file size that will render much smaller.

     
    |
    Mark as:
  • Currently Being Moderated
    Jan 15, 2014 3:37 AM   in reply to Daniel Ulysses

    No problem at all. - you can send a pm from this forum

     
    |
    Mark as:
  • Currently Being Moderated
    Jan 27, 2014 2:40 PM   in reply to Daniel Ulysses

    i have a problem like as your proglem too on that website wordpress tema

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points