- Easy to make your own designed HTML5 player. Functions are ready for your HTML.
- Support Flash fallback for non-HTML5 browsers. You can control your video player with same methods whether HTML5 Video or Flash.
- Accurate buffered bar support.
- Write your own HTML/CSS for video player, and load the script on the HTML. (See sample/index.html)
- Make config object and set elements & video sources as you have.
- new the yavideo5 instance with config object.
- Done!
<html>
<body>
<video id="video_player">
<object data="player.swf" id="external_player" type="application/x-shockwave-flash">
<param name="movie" value="player.swf">
<param name="allowfullscreen" value="true">
<param name="allowscriptaccess" value="always">
<param name="wmode" value="transparent">
</object>
</video>
<div id="controller_set">
<div class="button" id="rewind_button"></div>
<div class="button" id="play_button"></div>
<div class="button" id="pause_button"></div>
<div class="button" id="forward_button"></div>
<div id="time">00:00 / 00:00</div>
<div id="seekbar">
<div id="seek_background"></div>
<div class="buffered_bar" id="buffered_bar"></div>
<div id="progress_bar"></div>
<div id="seek_handle"></div>
<div id="time_tips">00:00</div>
</div>
</div>
<script src="yavideo5.js"></script>
<script>
var config = {
//Video & Object (Flash) elements
videoElement: document.getElementById("video_player"),
objectElement: document.getElementById("external_player"),
//Elements for controller (Not all elements are necessary if you don't need.)
playButton: document.getElementById("play_button"),
pauseButton: document.getElementById("pause_button"),
forwardButton: document.getElementById("forward_button"),
rewindButton: document.getElementById("rewind_button"),
seekbar: document.getElementById("seekbar"),
seekHandle: document.getElementById("seek_handle"),
progressBar: document.getElementById("progress_bar"),
bufferedBar: document.getElementById("buffered_bar"),
timeDisplay: document.getElementById("time"),
//Video sources with types for HTML5 video you have (One of them will be played if available && playable).
html5Video:{
mp4: "video.mp4",
webm: "video.webm",
ogv: "video.ogg"
},
//Video source for Flash fallback
flashVideo:"video.mp4",
//Instance name (Reference from global scope) of video player (to be used for flash fallback)
insName: "videoPlayer"
}
var videoPlayer = new yavideo5(config);
</script>
</body>
</html>| Methods | Return | Description |
|---|---|---|
| .getCurrentTime() | Current video time (in sec.) | Return current time in seconds. |
| .getDuration() | Video's duration (in sec.) | Return video duration. |
| .onStart( function ) | - | Execute function on start. |
| .onTimeUpdate( function ) | - | Execute function while playing. |
| .onComplete( function ) | - | Execute function when video ends. |
| .when( time, function , remove ) | - | Execute function at the time on video playing. if remove is true, the function will be removed after fired (option). |
| .setVolume( volume ) | - | Set video volume (value mast be from 0 to 1). |
| .getVolume() | Volume (0 to 1) | Return volume of the video. |
Copyright © 2013 Katsumasa Tamanaha (kTmnh). Released under the MIT License.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent