25 Replies Latest reply: Jan 27, 2014 2:40 PM by wptema RSS

    Need some help with video

    Daniel Ulysses Community Member

      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

        • 1. Re: Need some help with video
          Nancy O. MVP

          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.

          • 2. Re: Need some help with video
            Daniel Ulysses Community Member

            Thank you Nancy
            This is what I have.
            I got a slider in which I want to put the video.
            Here is what is inside this slider;


            <div class="tp-caption fade" 

                                                               data-x="100"

                                                               data-y="135"

                                                               data-speed="500"

                                                               data-start="1200"

                                                               data-easing="easeInOutExpo"  ><iframe src='http://player.vimeo.com/video/7449107?title=0&byline=0&portrait=0' width='520' height='300' style='width:520px;height:300px;'></iframe></div>

             

             

            In the iframe is where I want to put the video.
            Now, if I copy/paste your code, still it started as soon as I test/load the page.

             

            Any ideas?

             

            Thanks a lot for ALL YOUR YOUR HELP

            • 3. Re: Need some help with video
              Nancy O. MVP

              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.

              • 4. Re: Need some help with video
                Daniel Ulysses Community Member

                Nancy, this is a video (The Vimeo video) is just a place holder.
                The video that I have and want to put there is a mp4

                • 5. Re: Need some help with video
                  Nancy O. MVP

                  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.

                  • 6. Re: Need some help with video
                    mhollis55 Community Member

                    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

                    • 7. Re: Need some help with video
                      Daniel Ulysses Community Member

                      OK, give me 10 mins :-)

                      • 8. Re: Need some help with video
                        Nancy O. MVP

                        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.

                        • 10. Re: Need some help with video
                          mhollis55 Community Member

                          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

                          • 11. Re: Need some help with video
                            Daniel Ulysses Community Member

                            This works, but I cannot see the controls bar, plus the video is 'push out' to the bottom.

                             

                            "<!--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-->

                            • 12. Re: Need some help with video
                              mhollis55 Community Member

                              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

                              • 13. Re: Need some help with video
                                Daniel Ulysses Community Member

                                Ok, I just did upload the new file and video.
                                Now, I can see the controls, but no video . . . it's getting close

                                 

                                Thanks to all for all your help.
                                Saludos

                                • 14. Re: Need some help with video
                                  wordpress temalar

                                  i have big problem this look web site :

                                  • 15. Re: Need some help with video
                                    mhollis55 Community Member

                                    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

                                    • 16. Re: Need some help with video
                                      Daniel Ulysses Community Member

                                      Hola 15
                                      "Can you tell me why you have the div there?"
                                      To hold just the video in place.
                                      I just change the order of the video, but still don't work, or at least on my end

                                      • 17. Re: Need some help with video
                                        mhollis55 Community Member

                                        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

                                        • 19. Re: Need some help with video
                                          Daniel Ulysses Community Member

                                          First, thanks a lot to Nancy, Mark,
                                          Now, let me tell you that I'm going nuts

                                           

                                          Well, i decide to put/insert the video in another page.

                                          (this web is a template, by the way)
                                          so here it is.
                                          http://leynerphotography.com/e_index_3.html

                                           

                                          Now, I can see the video, it doesn't started by itself, but  . . . well, you can see what it's going on now.

                                          . . . getting ready to give up . . . but not yet

                                           

                                          How can I make it smaller?
                                          This is a responsive site, so I'm not sure what else to do.

                                           

                                          Thanks again to you.

                                          Saludos

                                          • 20. Re: Need some help with video
                                            es73 Community Member

                                            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.

                                            • 21. Re: Need some help with video
                                              Daniel Ulysses Community Member

                                              Thanks es

                                              Not sure why if I put the video inside a iFrame, it will keep the shape.
                                              Mark and Nancy will "chew' my but for useing it, but it's the only

                                              --at least now- for me to keep it in place.

                                              Now, the only thing it's to be able to see it in Google and in explorer,

                                              plus make it NOT  to star or autoplay.

                                               

                                              http://www.leynerphotography.com/e_index_3.html

                                               

                                               

                                              Thanks a lot . . .i'm going to sleep

                                              • 22. Re: Need some help with video
                                                Daniel Ulysses Community Member

                                                Well here is an update on my problem

                                                In Explorer 9, the video can be seeing, but the sizes go berserk

                                                In Safari 5.1.7 I got a error message that say;
                                                "webkit2webprocess.exe has stopped working "

                                                 

                                                Google Chrome it's good (start by itself, but keep the size)
                                                Firefox same as Google

                                                 

                                                Well, let's see if I can improve this thing that it's making my life so interesting . ..

                                                 

                                                Saludos

                                                • 23. Re: Need some help with video
                                                  Daniel Ulysses Community Member

                                                  Hola mhollis55

                                                   

                                                  Can I email you a private question?
                                                  Please let me know how to contact you, if you agree.
                                                  Saludos

                                                  • 24. Re: Need some help with video
                                                    es73 Community Member

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

                                                    • 25. Re: Need some help with video
                                                      wptema

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