All geek questions in one place

Cross-browser embedded video solution

My company is starting to play a large number of interactive instructional / instructional videos to be displayed on a web page. We need a simple cross-browser solution that can accommodate most users for in-line viewing.

One solution that I read about (which is not very simple) is to create Flash, mp4 and avi versions of each video, and let the javascript plug-in determine which browser works best.

+6
source share
6 answers

I experimented a bit with video games in all browsers. The best way to do this is to configure the html5 tag with flash reserve. This does not actually require javascript. This site: http://camendesign.com/code/video_for_everybody gives an excellent explanation of how to do this.

You will need to configure something that basically looks like this:

<video width="640" height="360" controls> <!-- MP4 must be first for iPad! --> <source src="__VIDEO__.MP4" type="video/mp4" /><!-- Safari / iOS video --> <source src="__VIDEO__.OGV" type="video/ogg" /><!-- Firefox / Opera / Chrome10 --> <!-- fallback to Flash: --> <object width="640" height="360" type="application/x-shockwave-flash" data="__FLASH__.SWF"> <!-- Firefox uses the `data` attribute above, IE/Safari uses the param below --> <param name="movie" value="__FLASH__.SWF" /> <param name="flashvars" value="controlbar=over&amp;image=__POSTER__.JPG&amp;file=__VIDEO__.MP4" /> <!-- fallback image. note the title field below, put the title of the video there --> <img src="__VIDEO__.JPG" width="640" height="360" alt="__TITLE__" title="No video playback capabilities, please download the video below" /> </object> </video>

A video tag is an html5 tag that can be used to display video files in modern browsers. However, you will need several different formats to display them correctly in each of them. For example, Firefox uses only the webm and ogg formats, while Safari accepts only the h264 and mp4 formats. Here is a great article about it: http://diveintohtml5.ep.io/video.html . Simple converter software that you can download to convert your videos to all of these formats can be found here: http://www.mirovideoconverter.com/ . Other browsers (especially IE) do not take the html5 video tag, so instead you should enable the flash format, which it will automatically disappear if it does not know what to do with the video tag.

As a result, you will have to create at least 3-4 different formats of your single video file so that it works between browsers and platforms (iOS mobile) due to the lack of compatible standards. It is also important to ensure that your server uses the correct mime types for these formats. This sucks, but so far this is the only way.

+10
source

The best decision:

http://www.videojs.com/

How to implement:

head:

 <link href="http://vjs.zencdn.net/c/video-js.css" rel="stylesheet"> <script src="http://vjs.zencdn.net/c/video.js"></script>

body:

 <div class="vid"> <video id="vid01" class="video-js vjs-default-skin" controls="controls" preload="none" width="640px" height="264px" poster="../../Content/YourInitialPicture.jpg"> <source src="../../Content/YourVideo.mp4" type='video/mp4'/> <!-- IE / Safari --> <source src="../../Content/YourVideo.webm" type='video/webm'/> <!-- Mozilla FF --> <source src="../../Content/YourVideo.ogg" type='video/ogg'/> <!-- Chrome / Opera --> <track kind="captions" src="../../Content/YourVideoCaption.vtt" srclang="en" label="English" /> </video> <script> var myPlayer = _V_("vid01"); </script> </div>

Copy / Paste the above code into your <body></body> and add your video path to src="../../"

  • .mp4 (Safari and IE can play this type of vids)
  • .webm (Mozilla can play this type of vids)
  • .ogg (Theora video)

You can use these free sponsors for your videos.

Just like that!

+3
source

For a commercial solution, check out http://www.sublimevideo.net/

For free registration http://www.videojs.com/

+1
source

Have you checked any jQuery plugins? There are many of them, which works well in a cross browser. You can check out http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/

0
source

What worked for me: I uploaded the video to YouTube and then uploaded it as MP4 and seemed to work in browsers with the video tag.

0
source

I have been studying this for quite some time, and I am trying to do the same, so hopefully this will help someone else. I use crossbrowsertesting.com and literally test it in almost every browser known to man. The solution I got currently works in Opera, Chrome, Firefox 3.5+, IE8 +, iPhone 3GS, iPhone 4, iPhone 4, iPhone 5, iPhone 5, iPad 1+, Android 2.3+, Windows Phone 8.

Dynamic change of sources

Changing a video dynamically is very difficult, and with Flash fallback you will need to remove the video from the DOM / page and add it again so that Flash is updated because Flash does not recognize dynamic updates for Flash vars. If you intend to use JavaScript to dynamically change it, I would completely remove all <source> elements and just use canPlayType to set src in JavaScript and break or return after the first supported video type and don't forget to dynamically update flash var mp4. In addition, some browsers will not register that you changed the source unless you name video.load() . I believe that the .load() problem you were experiencing can be fixed by calling video.pause() . Removing and adding video elements can slow down the browser, as it continues to buffer remote video, but there is a workaround .

Cross browser support

As for the actual part of the cross browser, I came to Video For Everybody . I already tried the MediaelementJS Wordpress plugin, which, as it turned out, caused a lot more problems than it solved. I suspect the problems are related to the Wordpress plugin, not the library. I am trying to find something that works without JavaScript, if possible. So far, what I came up with is simple HTML:

 <video width="300" height="150" controls="controls" poster="http://sandbox.thewikies.com/vfe-generator/images/big-buck-bunny_poster.jpg" class="responsive"> <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.ogv" type="video/ogg" /> <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4" /> <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.webm" type="video/webm" /> <source src="http://alex-watson.net/wp-content/uploads/2014/07/big_buck_bunny.iphone.mp4" type="video/mp4" /> <source src="http://alex-watson.net/wp-content/uploads/2014/07/big_buck_bunny.iphone3g.mp4" type="video/mp4" /> <object type="application/x-shockwave-flash" data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" width="561" height="297"> <param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" /> <param name="allowFullScreen" value="true" /> <param name="wmode" value="transparent" /> <param name="flashVars" value="config={'playlist':['http://sandbox.thewikies.com/vfe-generator/images/big-buck-bunny_poster.jpg',{'url':'http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4','autoPlay':false}]}" /> <img alt="No Video" src="http://sandbox.thewikies.com/vfe-generator/images/big-buck-bunny_poster.jpg" width="561" height="297" title="No video playback capabilities, please download the video below" /> </object> <strong>Download video:</strong> <a href="video.mp4">MP4 format</a> | <a href="video.ogv">Ogg format</a> | <a href="video.webm">WebM format</a> </video>

Important notes :

  • The inclusion of ogg as the first <source> ended because Mac OS Firefox stops trying to play the video if it encounters MP4 as the first <source> .
  • The correct MIME types are important .ogv files must be video/ogg , not video/ogv
  • If you have HD video, the best transcoder I have found for HD quality OGG files, Firefogg
  • The .iphone.mp4 file is for iPhone 4+, which will only play videos that are MPEG-4 with H.264 Baseline 3 Video and AAC audio. The best transcoder I found for this format is Handbrake, using the iPhone and iPod Touch will work on the iPhone 4+, but in order to get the iPhone 3GS working, you need to use the iPod preset, which has a much lower resolution, which I added as video.iphone3g.mp4 .
  • In the future, we will be able to use the media attribute for <source> elements to target mobile devices to media queries, but now older Apple and Android devices do not support it well enough.
0
source

Source: https://habr.com/ru/post/895255/

More articles:


All Articles