About / Feedback • Demo • Help / 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
- Try it out here: CwVideo Demo »
Questions?
- Write a comment (below) or click here: CwVideo Help »
Are there any recent updations to support IE also ?
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.
Is this supports for adobe air application
No, just Javascript + HTML5 + CSS
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?
Sorry… iOS 4.0 and 5.0…
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..
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.
Have you got a link to a webpage? That would make it easier..
Yes, you can check it out here:
http://www.darkhorsewins.com/BETA/BETAindex.html
I spoke to the company today, since the videos are pretty small (30 sec each)they may be combining them into 1 video, which may make things easier.
I really appreciate this.
I just sent you a mail, this is easier.Solved now, a jQuery extension had problems.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.
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();
}
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).
Good to know, thanks.
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
Hi –
you can use something like $$(‘#myvid source’), which gives you an array of source-tags, where you can change the src-property.
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).
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);
}
}
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()”
No need to change cwvideo.js, it happens all on the HTML-Page:
Thanks. everything is OK now.
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.
Hi –
posting code is somewhat difficult with wordpress – could you send a link or the sourcecode via email?
Hi there,
Cute video player! How do i increase speed of video player?
Thanks.
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..
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
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
Hi, can I quote some of the content found in this entry if I provide a link back to your site?
Of course.
Thanks for this! I’ve been searching all over the web for the info.