/*
* video播放器
*/
* @ src: 指定所要嵌入视频、文档的URL。
* @ poster: 视频预览图像
* @ autoplay: 视频自动播放
* @ loop: 循环播放
* @ muted: 是否静音
* @ controls: 视频控件
* @ preload: 用于指定是否提前下载，怎样提前下载视频数据，给用户代理相应的提示。autoplay：preload属性将无效
* @ 1. auto：尽可能提前下载视频
* @ 2.metadata：只下载视频的meta信息部分。Meta信息中收集了关于视频的长度、视频的起始祯的图像、视频的长度等信息
/*
* video事件
*/
* @ canPlayType: 检查是否支持HTML5 video元素并且执行所有其他代码, 如果不支持视频, 返回false并显示一条消息
* @ canplay: 通知何时视频加载内容已足够用于开始播放
* @ loadedmetadata: 获取视频的长度, 才有duration属性
* @ timeupdate: 获取视频中的当前位置, 当currentTime属性发生更改时, 引发ontimeupdate事件,在事件处理程序中，从视频对象中检索 currentTime的值并进行显示。currentTime 属性是浮点型变量，该变量可以从 12 位中获取小数位置。但是，出于性能方面的考虑，在 Windows Internet Explorer中一秒内仅引发该事件四次。若要在示例中显示，则需要使用 "toFixed()" 方法将 currentTime 取舍为一位。运行视频时，会更新和显示当前时间。
* @ playing: 点击视频播放
* @ pause: 点击视频暂停
* @ volumechange: 视频静音设置
/*
* video属性
*/
* @ play: 视频的播放
* @ pause: 视频的暂停
* @ paused: 检查video是否在暂停
* @ volume: 获取或设置音量
* @ duration: 获取视频总时间
* @ currentTime: 获取当前播放时间
* @ playbackRate属性: 视频播放速度
HTMl <embed>
<embed src="http://gz.chimelong.com/happy/images/banner/happy08.mp4" autostart="false" type="application/x-shockwave-flash" allowfullscreen="false" allowscriptaccess="always" width="300" height="200"/>
hidden设置播放面板的显示和隐藏，hidden有两个值：true(隐藏)和no(显示)； autostart设置多媒体内容的播放方式， autostart 有两个值：true（自动播放）和no（不自动播放）；loop设定是否循环播放， loop有两个值：true（无限次循环播放）no（仅播放一次）。starttime开始时间，值为"mm:ss" ,表示多久后开始播放。volume调节音量:, 属性规定音频或视频文件的音量大小。值在0~100之间的整数。
HTML5: video事件
<video id="thevideo" autoplay width="300" height="200" poster="/images/video.png">
<source src="http://gz.chimelong.com/happy/images/banner/happy08.mp4" type="video/mp4" >
<!-- IE低版本 -->
<object>
<embed src="https://img.zhankr.net/t5kg0t2jqwu15823.png" id="rotateVideo" alt=""> -->
</div>
<div title="Event status area" >
<label>oncanplaythrough: </label><span class="stats" id="cpt"></span><br />
<label>onloadstart: </label><span class="stats" id="ls"></span><br />
<label>onprogress: </label><span class="stats" id="pg"></span><br />
<label>onloadeddata: </label><span class="stats" id="ld"></span><br />
<label>onended: </label><span class="stats" id="ndd"></span><br />
<label>onemptied: </label><span class="stats" id="mt"></span><br />
<label>onstalled: </label><span class="stats" id="stall"></span><br />
<label>onwaiting: </label><span class="stats" id="waiting"></span><br />
<label>ondurationchange: </label><span class="stats" id="dc"></span><br />
</div>
(function(){
var video = document.getElementById("thevideo");
var vLength;
var pgFlag = ""; //used for progress tracking if(video.canPlayType){ //tests that we have HTML5 video support
//video button helper functions;
//play video
function vidplay(evt){
if(video.paused){
video.play();
document.getElementById("play").innerHTML = "暂停";
}else{
video.pause();
document.getElementById("play").innerHTML = "播放"
}
}
video.addEventListener("canplay",function(){
document.getElementById("wrap").style.display = "block";
video.controls = true;
},false) //button helper functions
//skip,forward,backwrap,or restart
function setTime(tValue){
//if no video is loaded,this throws an exception
try{
if(tValue == 0){
video.currentTime = tValue;
video.play(); //如果是暂停后再按重放键会重置到开始是暂停状态,所以要开启
}else{
video.currentTime += tValue;
}
}catch(err){
errMessage("Video content might not be loaded");
}
} //change volume based on incoming value
function setVol(value){
var vol = video.volume;
vol = (vol + value).toFixed(1);
//test for range 0 - 1 to avoid exceptions
if(vol >= 0 && vol <= 1){
video.volume = vol;
}else{
video.volume = (vol < 0) ? 0 : 1;
}
} //点击视频内容播放暂停
var borwser = (function(){
var s = navigator.userAgent.toLowerCase();
var match = /(webkit)[ \/]([\w.]+)/.exec(s)||/(opera)(?:.*version)?[ \/]([\w.]+)/.exec(s)||(!!window.ActiveXObject || "ActiveXObject" in window) && /(msie\s|rv:)([\w.]+)/.exec(s)||!/compatible/.test(s) && /(mozilla)(?:.*? rv:([\w.]+))?/.exec(s) ||[];
return {name : match[1] || "",version : match[2] || "0"};
})();
if(borwser.name !== "mozilla"){
video.addEventListener("click",vidplay,false);
console.log("非火狐浏览器")
}else{
console.log("火狐浏览器")
} //chrome和opera双击全屏
if(borwser.name === "webkit"){
//chrome的双击视频画面全屏
var count = 0;
video.addEventListener("dblclick",function(){
if(count % 2 == 0){
video.webkitRequestFullScreen();
}else{
// video.exitFullscreen();
document.webkitCancelFullScreen();
console.log("退出全屏")
}
count++;
},false);
} //play
document.getElementById("play").addEventListener("click",vidplay,false); //restart
document.getElementById("restart").addEventListener("click",function(){
setTime(0);
},false); //Skip backwrad 10 seconds
document.getElementById("rew").addEventListener("click",function(){
setTime(-10);
},false); //Skip forward 10 seconds
document.getElementById("forward").addEventListener("click",function(){
setTime(10);
},false); //volume buttons
document.getElementById("volumeDown").addEventListener("click",function(){
setVol(-.1); //down by 10%;
},false);
document.getElementById("volumeUp").addEventListener("click",function(){
setVol(.1); //up by 10%;
},false); //playback speed buttons
document.getElementById("slower").addEventListener("click",function(){
video.playbackRate -= .25;
},false); document.getElementById("faster").addEventListener("click",function(){
video.playbackRate += .25;
},false); document.getElementById("mormal").addEventListener("click",function(){
video.playbackRate = 1;
},false); //mute
document.getElementById("mute").addEventListener("click",function(){
if(video.muted){
video.muted = false;
}else{
video.muted = true;
}
},false); //paused and playing events to control buttons
video.addEventListener("pause",function(){
document.getElementById("play").innerHTML = "播放";
},false); video.addEventListener("playing",function(){
document.getElementById("play").innerHTML = "暂停";
},false); //display video duration when availbale
video.addEventListener("loadedmetadata",function(){
vLength = video.duration.toFixed(1);
document.getElementById("vLength").innerHTML = "视频时间长度:" + vLength + "秒";
},false) //display the current and remaining times
video.addEventListener("timeupdate",function(){
var vTime = video.currentTime;
document.getElementById("curTime").innerHTML = "当前播放时间:" + vTime.toFixed(1) + "秒";
document.getElementById("vRemaining").innerHTML = "当前播放时间:" + (vLength - vTime).toFixed(1) + "秒";
},false); //onvolumechange controls mute
video.addEventListener("volumechange",function(){
if(video.muted){
document.getElementById("mutetext").innerHTML = "声音:静音";
}else{
document.getElementById("mutetext").innerHTML = "音量:" + video.volume;
}
},false); //any video error will fail with message
video.addEventListener("error",function(err){
errMessage(err);
},false); //Download and playback status events
//页面加载时出现
video.addEventListener("loadstart",function(){
document.getElementById("ls").innerHTML = "Stared";
},false); //视频加载完后才出现
video.addEventListener("loadeddata",function(){
document.getElementById("ld").innerHTML = "Data was loaded";
},false); //视频播放结束后触发
video.addEventListener("ended",function(){
document.getElementById("ndd").innerHTML = "Playback ended;";
},false); //重置为初始状态下触发
video.addEventListener("emptied",function(){
document.getElementById("mt").innerHTML = "Video reset";
},false); //在下载被中断三秒以上时引发.网络差时触发
video.addEventListener("stalled",function(){
document.getElementById("stall").innerHTML = "Download was stalled";
},false); //播放下一帧不可用时触发(断网或者缓冲情况下)
video.addEventListener("waiting",function(){
document.getElementById("waiting").innerHTML = "Player waited for content";
},false); //指示正在下载媒体内容,下载完后停止
video.addEventListener("progress",function(){
pgFlag += ".";
if(pgFlag.length > 10){
pgFlag = ".";
}
document.getElementById("pg").innerHTML = pgFlag;
},false); //在onloadstart之后和onloadedmetadata(确定时间)之前主立即引发
video.addEventListener("durationchange", function () {
document.getElementById("dc").textContent = "Duration has changed";
}, false); //在不需要进一步缓冲就可以播放直至文件结束时引发
video.addEventListener("canplaythrough", function () {
document.getElementById("cpt").textContent = "Ready to play whole video";
}, false); function errMessage(msg){
//display an error message for 5 seconds then clears it;
document.getElementById("errorMsg").innerHTML = msg;
setTimeout(function(){
document.getElementById("errorMsg").innerHTML = "";
},5000);
}
}else{
errMessage("HTML5 Video is required for this example");
}
}())
