CwVideo

About / FeedbackDemoHelp / Download

A Toolkit to handle HTML 5 video

Requirements

  • Works in Safari 3+, Firefox 3+, Chrome 3+ and Opera 10.5+ (Finally..)
  • Requires mootools 1.24+ (Core) and Fx.Slider (More)

Features

  • Simplify video control
  • Timeline Controller (Timeslider)
  • Volume Slider

Demo

Questions?

121 Replies to “CwVideo”

    1. As far as I know, IE from version 9 up should support the video-tag with H.264-encoded videos. Older versions simply don’t understand the video-tag so there’s no way to play HTML 5 video in these IE versions – except using Flash.

  1. Thanks for your code. Easy to understand and to extend!

    I have tested the code with different mobile devices. It work on iOS 3.0, 4.0 (iPhone 3GS/4/iPad 1) but it does not work on Android 2.0 (works on a tablet that have 3.0 version…) and as you said not on IE. Did you schedule to improve the compatibility of the player or how we can do this ? mootools issue?

    1. Hi –

      it’s like this:

      – In IE 6-8 there’s no way to do this – the HTML5 VIDEO-tag is planned for IE 9, the earlier versions simply can’t use it.

      – Android 2.0 should work, here the problem is the video-format, have a look here: stackoverflow.com/questions/1711078/html5-video-element-on-android

      If you need a cross-platform solution, which works in IE 6-8 and earlier Firefox/Opera-Browsers, you should look for another tool. There are many (also free) videoplayers which include a Flash-Player as fallback for older browsers.

      CwVideo is meant to be a JavaScript/Mootools extension only. And since I’ve never developed anything in Flash(*) I don’t think IE 6-8 will ever be supported…


      (*) Which reminds me… Many years ago I worked as developer and trainer for Macromedia Director – the direct predecessor of Flash . Director was used as authoring system for CD-ROMs, that was before the Internet became popular..

  2. Hi,

    This is regarding the below post. Followup:

    I still get the browser default video players/containers. I want just the plain video player you have on your demo. I have links to all the js docs in the head of my html and the line of code to initialize the CWVideo.

    window.addEvent(‘domready’, function() {
    myvideo = new CwVideo(‘myvid’); // initialize CwVideo
    var myVideo = $(‘myvid’); // <video id="myvid"…
    myVideo.addEvent('ended', myNewSrc);
    });

    The first video plays from the html across all browsers but stops there-the rest of the list is not playing sequentially-or not switching to the js playlist. The controls work except in Firefox.

    So close!

    Thanks again for your help.

  3. I would like to make custom image buttons for play, pause, and volume. Where would I go about inserting the image buttons in the js code in html doc, to call each function (play, pause, volume)?

    For the website I’m building I have 4 videos set to autoplay sequentially, one right after the other. I have set the list up as a js playlist, calling the first video in the html and then falling back to the js in the head of the doc to play the other 3.

    function myEndedListener(){
    var myVideo = document.getElementsByTagName(‘video’)[0];
    myVideo.addEventListener(‘ended’,myNewSrc,false);
    }

    var position = 0;
    var videoList=new Array(“02_movie.mp4”,
    “03_movie.mp4”,
    “04_movie.mp4”);

    function myNewSrc() {
    var myVideo = document.getElementsByTagName(‘video’)[0];
    if(++position >= videoList.length) {
    position = 0;
    }
    myVideo.src=videoList[position];
    myVideo.load();
    myVideo.play();
    }

    Would this code work with your player?

    Thanks so much.

    1. Hi –

      – Image buttons and volume slider are no problem, you can see the code i.e. in the downloaded zip-file or on the demo page. Simply add an onclick-handler to your images or surround them with an a-tag, that depends on how you write the buttons im HTML

      – The video switch is also no problem, here’s how it would work with mootools. Here I assume the video-tag has the id “myvid”:


      window.addEvent('domready', function() {
      var myVideo = $('myvid'); //

      myVideo.src = videoList[position];
      myVideo.load();
      myVideo.play();
      }

  4. I am using Windows 7 firefox and when i Unzipped the mootools and ran the demo it said “Current Event: error”, “Ready State: have nothing”, “Network State: no source”. I checked and the file cwvideo-ogg.ogg and cwvideo-mp4.mp4 does exist in the same path as Demo. So how do I fix this problem. I made no modification to the index.html file what so ever.

    Woops solved the problem. Crappy IIS 8 needs mime to be setup properly (should have gone with Apache2).

  5. I am curious about how to pass the url of the video to the player from a javascript link so user could click different videos to play, without having to have a new video item

    1. Hi –

      you can use something like $$(‘#myvid source’), which gives you an array of source-tags, where you can change the src-property.

  6. hello! thanks for this toolkit…very helpful.

    I have one question – maybe is very simple, but i can’t do it.

    I create links for play video from specific time, like this –

    goto 8s

    it’s work…video play from 8s.

    But how i can pause video after this play? For example for 12 seconds and paused.
    I want to play only fragment of a video (from 8s to 12s).

    1. Hi –

      yes, that’s possible but not very obvious..:

      You make a script that goes to the start position, starts playing and triggers a repeating timer (via the mootools-function periodical).
      This timer checks the current playback position and stops the video (and the timer), if the end is reached.

      var timer;

      function playRange()
      {
      myvideo.move('00:03'); // start time
      myvideo.play();
      timer = checkRange.periodical(1000);
      }

      function checkRange()
      {
      if ($('myvid').currentTime > 6) { // end time
      $('myvid').pause();
      clearInterval(timer);
      }
      }

      1. I’m sorry, I tried to use this code – does not work. maybe I misunderstood – where the code is inserted

        js-code in two scripts
        cwvideo.js:

        CwVideo = new Class ({
        ……

        and

        settings.js:

        window.addEvent (‘domready’, function () {
        myvideo = new CwVideo (‘myvid’);
        ……

        Link – onclick=”myvideo.move(‘0:03’);myvideo.play()”

        1. No need to change cwvideo.js, it happens all on the HTML-Page:



  7. How do I set up multiple videos on a page? I want to be able to have a grid of videos with no controls, where you just click an image and it plays a video. I’ve downloaded your code and changed it to this…

    But I can’t figure out how to set it up so I can play multiple videos at once. Please advise! Thank you.

    1. Hi –

      setting the playback speed does not (yet) work fully in all browsers, but you can set the playback rate like this:

      $(‘myvid’).playbackRate = 2; // double speed..

      1. Thank dude. I have placed this line here but could not success.

        myvideo = new CwVideo(‘myvid’); // initialize myvideo.playbackRate = 2

        Could advise exact placement of code to add this code?

        Thanks,
        Rakesh

        1. Hi –

          for “myvid” you have to insert the id of your html5-video container.

          And how to place it depends on your page, simply try a button like this:

          test

Leave a Reply to Mario Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.