15 Replies Latest reply on Nov 2, 2012 3:34 AM by sc0073r

    Non-youtube-vimeo video embed with controls?

    sc0073r

      Hi,

       

      I noticed in Heathrowe's code you could bring in video from a youtube style site with controls already or you can call a video from your public html folder. I see that it says that playback controls are coded in but they do not work.

       

      Can someone tell me how to get them to work?

       

      It pulls in the videos just fine but I have several videos that need to be larger than youtube and more than 1 a week on vimeo for a portfolio.

       

      Here is the code:

      //////////

      //Sample One

      //Append Video

      //////////

      var vid = $("<video width='352' height='155' controls='controls'>" +

      "<source src='http://www.w3schools.com/html5/movie.mp4' type='video/mp4' />" +

      "<source src='http://www.w3schools.com/html5/movie.ogg' type='video/ogg' />" +

      "This browser is not compatible with HTML 5" +

      "</video>");

       

       

      sym.$("vcontainer").append(vid);

      vid.attr('autoplay','autoplay');

      vid.attr('preload','auto');

       

      the control='controls' looks to be the part I need but it doesn't work. Do I need some sort of player shell sitting in my public html folder as well?

       

      Thanks!

        • 1. Re: Non-youtube-vimeo video embed with controls?
          sc0073r Level 1

          Also after right clicking on the video it does say video controls are on. I can fast forward and rewind the video but I can't see the controls. I cant find the play or stop button or well, just any of the controls at all even though I can control it.

          • 2. Re: Non-youtube-vimeo video embed with controls?
            heathrowe Most Valuable Participant

            The controls should show when you mouse over the native player

             

            Try this instead, remove the controls option from the variable

             

            var vid = $("<video width='352' height='155' controls='controls'>" +

            "<source src='http://www.w3schools.com/html5/movie.mp4' type='video/mp4' />" +

            "<source src='http://www.w3schools.com/html5/movie.ogg' type='video/ogg' />" +

            "This browser is not compatible with HTML 5" +

            "</video>");

             

             

            sym.$("vcontainer").append(vid);

            vid.attr('autoplay','autoplay');

            vid.attr('preload','auto');

             

            // enable controls via the player attribute, where 1 = true, 0 = false

            vid.attr('controls','1');

             

            Darrell

            • 3. Re: Non-youtube-vimeo video embed with controls?
              sc0073r Level 1

              Hi Darrell!

               

              Thank you for this! I will try it when I get the chance but I realized my mistake I think.

               

              They don't appear in Chrome. They appeared in Safari and now I think the question is what format is Google using now? I had read that you need to compress in VP8 or Thedora and they've moved away from .mp4 citing that they no longer support something that is not an open source video compression.

               

              Can anyone confirm this and how would I go about adding the codecs into Premiere and or After Effects? I don't think they have native support from Adobe. I have Skysoft converter downloaded and also the MPEG Streamclip.

               

              Thanks!

              • 4. Re: Non-youtube-vimeo video embed with controls?
                Jerry Witt Level 2

                In my humble opinion I think the combination of mp4 and ogg formats is the safest way to go in the forseeable future. Here is my understanding of the story so far:

                 

                Several browser developers did not want to adopt the mp4 video compression format because it was rights-encumbered and would require a licensing fee. When Google acquired On2 (the company that made one of the earliest Flash video codecs) they released the codec as open source. Yay!

                 

                So Firefox decided to support Ogg compressed files that used this technology and NOT support mp4. Then, when Google released Chrome they (surprisingly) decided to support mp4. Over the last couple of years Firefox has watched it's market share dwindle. I believe this is partially due to more and more sites using mp4 for video and not encoding the ogg format, but using a Flash fallback instead.

                 

                So now Firefox has come around and said that they are considering support for h264 filed (I presume in the mp4 wrapper). But my understanding is that the server requires some "GStreamer backend" and the Linux platform is not supported. A partial fix at best.

                 

                At this stage, unless a high-quality, free and open-source codec that is better than h264/mp4 shows up, I don'r see Apple or Microsoft jumping on it.

                • 5. Re: Non-youtube-vimeo video embed with controls?
                  sc0073r Level 1

                  Yeah but it appears that ogg is no longer supported by chrome. In Darrell's code, he has support for .ogg. It play fine but the native controls do not work.

                   

                  I'll have to try the other way but his first way should work. Works fine in Safari.

                  • 6. Re: Non-youtube-vimeo video embed with controls?
                    sc0073r Level 1

                    Hi again Darrell!

                     

                    I replaced the code with what you gave me and I still can't "see" the controls. They are there but they are invisible in Chrome. I haven't tested firefox but they are definitely there in Safari.

                     

                    Is anyone else having this problem with Chrome?

                    • 7. Re: Non-youtube-vimeo video embed with controls?
                      sc0073r Level 1

                      So sorry. This is snowballing into bigger problems and I'm not sure if I should create another thread but...

                       

                      Firefox is saying that the mime type is not supported when trying to play the video in it. I don't know if my server supports it but it's a pretty good webhost so I'm not sure what to do. How can I enable the mime type or whatever? Sorry, total newb. flv was easy. I'm not a coder. I'm an artist

                       

                      Furthermore, my .ogv format with a lower bitrate as .webm is taking forever to load. A good 15 minutes I would say. It plays the whole video without a hitch but it's like it isn't buffering.

                       

                      User error is huge here so I know I did something wrong. Hope someone can help.

                      • 8. Re: Non-youtube-vimeo video embed with controls?
                        Jerry Witt Level 2

                        Perhaps take a look at http://videojs.com/

                         

                        I know it is not an EA site, but videoJS made implementing video on http://takefivemethod.com/ much easier. And it seems to play back in Chrome, FF, Safari and iOS without an issue.

                        • 9. Re: Non-youtube-vimeo video embed with controls?
                          heathrowe Most Valuable Participant

                          With regards to the video controls not showing in Chrome, I actually encountered the same issue you mention/describe. However, I realized it was with a project file that was a' carry' over from previous public previews to the final.

                           

                          So as a test, I simply recreated it in version 1, and now I can see the Controls in Chrome (v 22). I suspect some older 'code' was retained somewhere from the carry-over file, that caused the hiccup.

                           

                          Demo here - http://www.heathrowe.com/edge/video3/video.html

                          Can you confirm that the controlas show in Chrome from this link, above.

                          Download here - http://www.heathrowe.com/edge/video3/video.zip

                           

                          Darrell

                          • 10. Re: Non-youtube-vimeo video embed with controls?
                            sc0073r Level 1

                            Hi Darrell,

                             

                            Thanks you so much! I'm sorry I don't know about html5 and javascript enough to be able to figure this stuff out.

                             

                            I did get my .htaccess file to include AddType video/ogg ogv and AddType video/webm. The webm has not been tested on Firefox. I do get the controls in Firefox with ogv though and ogv finally works on Firefox!

                             

                            Did the Chrome issue have to do with the video being over top of the controls? That's what seemed like was happening.

                             

                            I can't wait to test this out tonight but I have to go kick cancer in the teeth with our light the night walk.

                             

                            Thanks!

                             

                            Scott

                            • 11. Re: Non-youtube-vimeo video embed with controls?
                              sc0073r Level 1

                              Hi Darrell!

                               

                              Yes the controls definitely do work here and thanks for that! Your link to the zip is giving me a 404 though

                               

                              Thanks again,

                               

                              Scott

                              • 12. Re: Non-youtube-vimeo video embed with controls?
                                heathrowe Most Valuable Participant

                                Apologies that download link should be

                                Download here - http://www.heathrowe.com/edge/video3/video3.zip

                                 

                                Darrell

                                • 13. Re: Non-youtube-vimeo video embed with controls?
                                  sc0073r Level 1

                                  haha. I'm so sorry. 404ed still. Looks to be the same link as above.

                                  • 15. Re: Non-youtube-vimeo video embed with controls?
                                    sc0073r Level 1

                                    Hi Darrell!

                                     

                                    Thank you very much. You are too kind. If you have a donation page, I would love to support you. Your information has been more than worth the price of admission (which, in this case, has been completely free).

                                     

                                    On a side note, I boiled your code down to this:

                                     

                                    var myvideo = sym.$("vcontainer");

                                     

                                     

                                    var vid = $("<video controls width='350' height='250'>" +

                                         "<source src='http://www.w3schools.com/html/movie.webm' type='video/webm' />" +

                                         "<source src='http://www.w3schools.com/html/movie.ogg' type='video/ogg' />" +

                                         "<source src='http://www.w3schools.com/html/movie.mp4' type='video/mp4' />" +

                                         "This browser is not compatible with HTML 5" +

                                         "</video>");

                                     

                                     

                                    sym.$("vcontainer").append(vid);

                                    myvideo.css({"width":vid.width(),"height":vid.height()});

                                     

                                    If you have a donation page and I donate, maybe you could explain in detail how the rest of the code works with all of the devices that you have in your example? Just a note: It is absolutely unneccessary for me to get to that point with my website but, hey, I like to learn.

                                     

                                    I see you have the code to get the video to work in all apple products, Android and to detect a browser if none of those work.

                                     

                                    Otherwise, I'll still donate anyway if you have a paypal connection! I'll check your site for now but if not, maybe you should put one up! Making people pay for knowledge is one thing. Putting in valuable time without expecting to receive compensation is another and I"m fully appreciative and willing to donate if possible.

                                     

                                    Thank you so much.

                                     

                                    Scott