1 Topic by Awilum

  • Awilum
  • Awilum
  • Monstra Founder & Lead Developer
  • Offline
  • From: Russian Federation
  • Posts: 524
  • Reputation : [ 24 | 0 ]

Topic: VideoJS

http://joomlavisually.com/images/2011/jan/video-js.jpg


Video.js is a JavaScript and CSS library that makes it easier to work with and build on HTML5 video, today.

Video.js provides a common controls skin built in HTML/CSS, fixes cross-browser inconsistencies, adds additional features like fullscreen and subtitles, manages the fallback to Flash or other playback technologies when HTML5 video isn't supported, and also provides a consistent JavaScript API for interacting with the video.


http://i.minus.com/iKWByPZU0I2fq.png


Shortcodes:

{video mp4="http://video-js.zencoder.com/oceans-clip.mp4"}
{video webm="http://video-js.zencoder.com/oceans-clip.webm"}
{video width="640" height="480" poster="image.png" mp4="http://video-js.zencoder.com/oceans-clip.mp4"}

Download: videojs.zip

Monstra Loves You! Give some love back!

Awilum's Website

2 Reply by gdippe

  • gdippe
  • Monstra Newbie
  • Offline

Re: VideoJS

I'm not sure why this happened but I got a visible </video><!-- End Video.js --> below my mp4-video on the web page.

I solved it by removing the new line chars and put the following on a single line in videojs.plugin.php.

// Video.js
            return ('<!-- Begin Video.js --><video class="video-js vjs-default-skin" width="'.$width.'" height="'.$height.'"'.$poster_attribute.'controls'.$preload_attribute.$autoplay_attribute.'data-setup="{}">'.$mp4_source.''.$webm_source.''.$ogg_source.'</video><!-- End Video.js -->');

3 Reply by RomanArt

  • From: Thailand, Bangkok
  • Posts: 383
  • Reputation : [ 26 | 0 ]

Re: VideoJS

It happened cause of weird plugin "markdown" which i usually remove since we dont have a clear documentation about that, but so far we find out that any spaces in views for plugins telling markdown to convert it into <pre> and <code> and show as html in a front

(с) Roman Art
So far So good wink
+ gdippe

RomanArt's Website

4 Reply by gdippe

  • gdippe
  • Monstra Newbie
  • Offline

Re: VideoJS

Thanks a lot for the quick answer and a better solution to this problem!

5 Reply by gdippe

  • gdippe
  • Monstra Newbie
  • Offline

Re: VideoJS

I had an annoying problem with the loading spinner graphics being displayed all the time.
I solved it by changing this original code

            // Video.js
            return ('<!-- Begin Video.js -->
                     <video class="video-js vjs-default-skin" width="'.$width.'" height="'.$height.'"'.$poster_attribute.' controls '.$preload_attribute.$autoplay_attribute.' data-setup="{}">
                        '.$mp4_source.'
                        '.$webm_source.'
                        '.$ogg_source.'
                    </video>
                    <!-- End Video.js -->');

to this by adding the data-setup argument "children": {"loadingSpinner": false}

            // Video.js
            return ('<!-- Begin Video.js -->
                     <video class="video-js vjs-default-skin" width="'.$width.'" height="'.$height.'"'.$poster_attribute.' controls '.$preload_attribute.$autoplay_attribute.' data-setup="{"children": {"loadingSpinner": false}}">
                        '.$mp4_source.'
                        '.$webm_source.'
                        '.$ogg_source.'
                    </video>
                    <!-- End Video.js -->');