Video.js using the Tutorial API

VIDEOJS offers a solution that is a HTML5-compatible video player, with previous versions compatible with all browsers by providing three-suffix video and generating a flash version in a browser that does not support HTML5.

The latest 3.1.0 version optimized the previous practice, only need to provide two format video, the page is made more convenient, only two steps away:
1, reference script, Videojs very for your sake, direct CDN, you do not need to download the code into their own site
<link href= "Http://vjs.zencdn.net/c/video-js.css" rel= "stylesheet" >
<script src= "Http://vjs.zencdn.net/c/video.js" ></script>
2. Add a HTML5 video tag to the page to add:
<video id= "my_video_1″class=" Video-js Vjs-default-skin "Controls preload=" Auto "width=" 640″height= "264″poster=" My_video_poster.png "data-setup=" {} ">
<source src= "My_video.mp4″type= ' video/mp4′>
<source src= "MY_VIDEO.WEBM" type= ' VIDEO/WEBM ' >
</video>
Where post is the video thumbnail, the two source a point to the MP4 video, a point to WEBM video, during the page load process, Video.js will determine which format the browser supports video, will automatically load playable video.
It's simple!

Advanced: Using the API

Get object:
var myplayer = _v_ ("My_video_1″");
The next one is the ID value of the video tag, which is myplayer the player object.

Play:
Myplayer.play ();
Time out:
Myplayer.pause ();
Get Playback progress:
var whereyouat = Myplayer.currenttime ();
To set the playback progress:
Myplayer.currenttime (120);
Video duration, loading the completed video to know the length of the video, and not in the case of Flash
var howlongisthis = myplayer.duration ();
The buffer is to return the number of downloads
var whathasbeenbuffered = myplayer.buffered ();
Percentage of buffering
var howmuchisdownloaded = myplayer.bufferedpercent ();
Sound size (between 0-1)
var howloudisit = Myplayer.volume ();
Set the sound size
Myplayer.volume (0.5);

Get the width of the video
var howwideisit = Myplayer.width ();

Set width:
Myplayer.width (640);
Get height
var howtallisit = Myplayer.height ();
Set Height:
Myplayer.height (480);
One Step setting Size:
Myplayer.size (640,480);

Fullscreen
Myplayer.enterfullscreen ();
Leave full Screen
Myplayer.enterfullscreen ();

Add Event
var myFunc = function () {
Do something when the event is fired
};
Myplayer.addevent ("EventName", MyFunc);
Delete Event
Myplayer.removeevent ("EventName", MyFunc);

List of all events:

Namedescriptionloadstart starts loading play playback. Pause pauses. timeupdatefired when the current playback position have changed. During Playback This was fired every 15-250 milliseconds, depnding on the playback technology in use. It is time change, with specific playback technology, different The browser and format are different. Ended playback ends durationchangefired when the duration of the media resource are changed, or known for the first time. The download progress changes. Progress progress changes. Resize size modification. Volumechange volume change. Error.

Although the article shows that in the case does not support HTML5, will be flash play, but in support of HTML5 Firefox play MP4, but encountered great difficulty, although the call to Flash, but has been unable to play (but I have always suspected that my Firefox flash has a problem , don't know if it's true). But if you follow Videojs's advice and put in two-format videos, you won't have this problem.
Finally, is this a handy script for free?
After checking, the script follows the LGPLV3 protocol, listening to the protocol again big? Here's a common sense:
If you are using open source code in your project and your project is not open source, the optional open source agreement is: BSD, MIT, LGPL, Apache Licence 2.0. One of the first two can even modify the source code, but must be labeled copyright; the latter two can be used casually, but do not change casually, hehe. So you have to use this script, it is completely possible, the API is so full, as for the CSS, is not protected by copyright, you can change as needed to the style you want.

About open Source agreement, if a friend is interested, you can leave a message to discuss, I will write a separate article on the use of Open source protocol analysis.

Another: 3.1.0 version and 2.0.2 version are provided in the annex, we do not use the 2.0.2 version, but the package contains a demo, use the time to invoke the following: Videojs.setupallwhenready ();

In addition to the writing of video also has a special for flash writing, of course, you can also use this plug-in to achieve pure flash playback (just write Flash that part is good, you can guarantee the unified browsing effect, but iOS browser is not compatible with flash, it is necessary for you to judge to deal with

Transferred from: http://www.bcty365.com/content-47-604-1.html

Video.js using the Tutorial API