<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>视频</title>
<script type="text/javascript" src="http://www.xipwang.cn/js/jquery.min.js"></script>
</head>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
video::-webkit-media-controls-enclosure {
/*禁用播放器控制栏的样式*/
display: none !important;
}
ul {
margin: 0;
padding: 0;
list-style: none;
}
.content-box {
width: 800px;
height: 450px;
background: #ede;
margin: 40px auto
}
#videoObject {
width: 100% !important;
height: 100% !important;
display: block;
box-sizing: border-box;
color: #fff;
background-color: #000;
position: relative;
padding: 0;
vertical-align: top;
overflow: hidden;
}
.videoView {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
padding-bottom: 50px;
box-sizing: inherit;
}
.pdq-controll-wrap {
height: 50px;
background: #070c11;
position: absolute;
z-index: 21474836471;
bottom: 0px;
left: 0;
width: 100%;
visibility: visible;
display: block!important
}
/*进度条*/
.pdq-controll-wrap .pdq-progressBar {
width: 100%;
height: 2px;
background: #666;
position: absolute;
top: 0;
}
.pdq-controll-wrap .pdq-progressBar .pdq-progress-bgs {
width: 0;
height: 2px;
position: absolute;
background: #f01616;
left: 0;
top: 0;
}
.pdq-controll-wrap .pdq-progressBar .pdq-progress-hidebox {
width: 100%;
height: 8px;
position: relative;
background: #070c11;
left: 0;
top: -6px;
display: none;
z-index: 3;
}
.pdq-controll-wrap .pdq-progressBar .pdq-progress-hidebox .pdq-progress-timeShow {
position: absolute;
display: block;
top: -30px;
color: #fff;
background: #070c11;
font-family: "微软雅黑";
font-size: 14px;
display: none;
padding: 2px 5px;
}
.pdq-controll-wrap .pdq-progressBar .pdq-progress-hidebox:hover .pdq-progress-timeShow {
display: block;
}
.pdq-controll-wrap .pdq-progressBar .pdq-progress-hidebox .pdq-progress-buff {
background: #393e42;
height: 8px;
z-index: 1;
}
.pdq-controll-wrap .pdq-progressBar .pdq-progress-hidebox .pdq-progress-mouse-bar {
width: 100%;
height: 15px;
position: absolute;
left: 0;
top: -5px;
z-index: 1;
}
.pdq-controll-wrap:hover .pdq-progress-hidebox {
display: block;
cursor: pointer
}
.pdq-controll-wrap .pdq-progressBar .pdq-progress-hidebox .pdq-progress-bgh {
width: 0;
height: 8px;
position: absolute;
background: #f01616;
left: 0;
top: 0
}
.pdq-controll-wrap .pdq-progressBar .pdq-progress-hidebox .pdq-slider-button {
width: 12px;
;
height: 12px;
position: absolute;
background: #fff;
left: 0px;
margin-left: -10px;
top: -2px;
border-radius: 50%;
cursor: pointer;
z-index: 10;
}
.pdq-controll-wrap .pdq-progressBar .pdq-progress-hidebox .pdq-slider-button:active {
background: #666
}
/*播放按钮*/
.pdq-controll-wrap .pdq-plago {
width: 40px;
height: 40px;
float: left;
cursor: pointer;
margin-top: 6px;
margin-left: 4px;
background: url(http://www.xipwang.cn/assets/play.png) no-repeat center;
}
.pdq-controll-wrap .pdq-plago.stop {
background: url(http://www.xipwang.cn/assets/stop.png) no-repeat center;
}
/*视频时间*/
.pdq-controll-wrap .pdq-play-timer {
float: left;
color: #fff;
margin-top: 15px;
width: 120px;
text-align: center;
font-size: 14px;
font-family: "微软雅黑"
}
/*音量样式*/
.pdq-controll-wrap .pdq-play-volume {
width: 150px;
height: 40px;
float: left;
margin-top: 12px;
margin-left: 15px;
}
.pdq-controll-wrap .pdq-play-volume .pdq-play-icon {
width: 30px;
height: 30px;
background: url(http://www.xipwang.cn/assets/sound.png) no-repeat center;
float: left;
cursor: pointer;
}
.pdq-controll-wrap .pdq-play-volume .pdq-play-icon.mute {
background: url(http://www.xipwang.cn/assets/mute.png) no-repeat center;
}
.pdq-controll-wrap .pdq-play-volume .pdq-volume-scroll {
width: 100px;
height: 3px;
background: #43474b;
float: left;
margin-top: 14px;
margin-left: 4px;
position: relative;
}
.pdq-controll-wrap .pdq-play-volume .pdq-volume-scroll .vloume-roud {
width: 10px;
height: 10px;
border-radius: 50%;
background: #93999f;
position: absolute;
left: 0px;
top: -4px;
cursor: pointer;
z-index: 3;
margin-left: -5px;
border: 1px solid #93999f;
}
.pdq-controll-wrap .pdq-play-volume .pdq-volume-scroll .vloume-roud-bg {
width: 0px;
height: 3px;
border-radius: 2px;
background: #f00;
position: relative;
}
.pdq-controll-wrap .pdq-play-volume .pdq-volume-scroll .vloume-roud-slider {
width: 100%;
height: 30px;
border-radius: 2px;
position: absolute;
cursor: pointer;
z-index: 2;
left: 0;
top: -12px;
}
/*视频类型*/
.pdq-controll-wrap .pdq-play-course-type {
float: right;
margin-right: 20px;
font-size: 12px;
height: 40px;
width: 80px;
margin-top: 6px;
color: #fff;
font-family: "微软雅黑";
position: relative;
}
.pdq-controll-wrap .pdq-play-course-type .pdq-type-text {
text-align: center;
line-height: 40px;
cursor: pointer;
}
.pdq-controll-wrap .pdq-play-course-type .pdq-playlist {
position: absolute;
bottom: 40px;
left: 0;
z-index: 4;
display: none;
}
.pdq-controll-wrap .pdq-play-course-type .pdq-playlist li {
padding: 8px 2px;
color: #fff;
width: 80px;
text-align: center;
cursor: pointer;
font-size: 12px;
background: #070c11;
}
.pdq-controll-wrap .pdq-play-course-type .pdq-playlist li:hover {
background: #1f2429;
color: #f01616
}
/*视频高标清*/
.pdq-controll-wrap .pdq-play-menulist {
float: right;
margin-right: 20px;
font-size: 14px;
height: 40px;
width: 80px;
margin-top: 6px;
color: #fff;
font-family: "微软雅黑";
position: relative;
}
.pdq-controll-wrap .pdq-play-menulist .pdq-course-list {
position: absolute;
bottom: 40px;
left: 0;
width: 80px;
z-index: 4;
display: none;
}
.pdq-controll-wrap .pdq-play-menulist .pdq-course-list li {
padding: 8px 0px;
color: #fff;
width: 80px;
text-align: center;
cursor: pointer;
font-size: 12px;
background: #070c11;
}
.pdq-controll-wrap .pdq-play-menulist .pdq-course-list li:hover {
background: #1f2429;
color: #f01616
}
.pdq-controll-wrap .pdq-play-menulist .pqd-menu-text {
text-align: center;
line-height: 40px;
cursor: pointer;
font-size: 12px;
width: 80px;
}
.pdq-controll-wrap .pdq-play-menulist .pqd-menu-text.active {
color: #f01616;
background: #1f2429
}
/*全屏按钮*/
.pdq-play-fullscreen {
width: 40px;
height: 40px;
background: url(http://www.xipwang.cn/assets/fullScreen.png) no-repeat center;
float: right;
cursor: pointer;
margin-top: 6px;
}
.pdq-play-fullscreen.cancleScreen {
background: url(http://www.xipwang.cn/assets/smallScreen.png) no-repeat center;
}
/*视频播放倍数*/
.pdq-controll-wrap .pdq-playback-rate {
float: right;
margin-right: 20px;
height: 40px;
width: 80px;
margin-top: 6px;
color: #ccc;
position: relative;
font-size: 14px;
font-family: "微软雅黑"
}
.pdq-controll-wrap .pdq-playback-rate .pdq-playback-list {
position: absolute;
bottom: 40px;
left: 0;
z-index: 4;
display: none
}
.pdq-controll-wrap .pdq-playback-rate .pdq-playback-list li {
padding: 8px 0px;
color: #fff;
width: 80px;
text-align: center;
cursor: pointer;
font-size: 12px;
background: #070c11;
}
.pdq-controll-wrap .pdq-playback-rate .pdq-playback-list li:hover {
background: #1f2429;
color: #f01616
}
.pdq-controll-wrap .pdq-playback-rate .pdq-playback-text {
text-align: center;
line-height: 40px;
cursor: pointer;
font-size: 12px;
}
.pdq-controll-wrap .pdq-playback-rate .pdq-playback-text.active {
color: #f01616;
background: #1f2429
}
/*加载动画*/
.pdq-load-wrap {
width: 100%;
height: 100%;
z-index: 21474836450;
background: #1f2429;
position: absolute;
left: 0;
top: 0;
}
.pdq-load-wrap .pdq-loading-list {
display: block;
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
width: 80px;
height: 30px;
margin: auto;
}
.pdq-load-wrap .pdq-loading-list i {
float: left;
margin: 0 4px;
display: block;
width: 5px;
height: 30px;
background: #fff;
-webkit-transform: scaleY(0.8);
-ms-transform: scaleY(0.8);
transform: scaleY(0.8);
-webkit-animation: load 1.2s infinite;
animation: load 1.2s infinite;
}
.pdq-load-wrap .pdq-loading-list i:nth-child(2) {
-webkit-animation-delay: 0.1s;
animation-delay: 0.1s
}
.pdq-load-wrap .pdq-loading-list i:nth-child(3) {
-webkit-animation-delay: 0.2s;
animation-delay: 0.2s
}
.pdq-load-wrap .pdq-loading-list i:nth-child(4) {
-webkit-animation-delay: 0.3s;
animation-delay: 0.3s
}
.pdq-load-wrap .pdq-loading-list i:nth-child(5) {
-webkit-animation-delay: 0.4s;
animation-delay: 0.4s
}
.pdq-load-wrap .pdq-loading-list i:nth-child(6) {
-webkit-animation-delay: 0.5s;
animation-delay: 0.5s
}
@-webkit-keyframes load {
0%,
40%,
100% {
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5)
}
20% {
-webkit-transform: scaleY(01);
transform: scaleY(01)
}
}
@keyframes load {
0%,
40%,
100% {
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5)
}
20% {
-webkit-transform: scaleY(01);
transform: scaleY(01)
}
}
/*控制器消失动画*/
/*@keyframes vhide {
0% {opacity: 1;}
100% {opacity: 0;}}
@-webkit-keyframes vhide {
0% {opacity: 1;}
100% {opacity: 0;}
}
.vhidden {
animation: vhide 10.5s ease-in;
-webkit-animation: vhide 10.5s ease-in;
animation-fill-mode:forwards;
-webkit-animation-fill-mode: forwards;
}*/
/*暂停*/
.pdq-right-pause {
position: absolute;
width: 46px;
height: 46px;
background: #eee url(http://www.xipwang.cn/assets/pause-right.png) no-repeat center;
right: 0px;
bottom: 0px;
left: 0px;
top: 0px;
margin: auto;
border-radius: 50%;
cursor: pointer;
z-index: 21474836459;
display: none;
}
</style>
<body onselectstart="return false">
<div class="content-box">
<div id="videoObject">
<video id="videoView" class="videoView" src="" autoplay="autoplay" οncοntextmenu="return false;"></video>
<!--加载动画-->
<div id="pdq-load-wrap" class="pdq-load-wrap">
<ul id="pdq-loading-list" class="pdq-loading-list">
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<ul>
</div>
<!--控制器 S-->
<div id="pdq-controll-wrap" class="pdq-controll-wrap vhidden">
<div id="pdq-progressBar" class="pdq-progressBar">
<div id="pdq-progress-hidebox" class="pdq-progress-hidebox">
<div id="pdq-progress-mouse-bar" class="pdq-progress-mouse-bar"></div>
<div id="pdq-slider-button" class="pdq-slider-button"></div>
<div id="pdq-progress-bgh" class="pdq-progress-bgh"></div>
<div id="pdq-progress-buff" class="pdq-progress-buff"></div>
<span id="pdq-progress-timeShow" class="pdq-progress-timeShow">00:00</span>
</div>
<div id="pdq-progress-bgs" class="pdq-progress-bgs"></div>
</div>
<!--视频进度条-->
<div id="pdq-plago" class="pdq-plago"></div>
<!--暂停/播放-->
<div id="pdq-play-timer" class="pdq-play-timer">
<span id="pqd-nowTime" class="pqd-nowTime">00:00</span>
<span id="pdq-allTime" class="pdq-allTime">00:00</span>
</div>
<!--视频时间-->
<div id="pdq-play-volume" class="pdq-play-volume">
<div id="pdq-play-icon" class="pdq-play-icon"></div>
<div id="pdq-volume-scroll" class="pdq-volume-scroll">
<div id="vloume-roud" class="vloume-roud"></div>
<div id="vloume-roud-bg" class="vloume-roud-bg"></div>
<div id="vloume-roud-slider" class="vloume-roud-slider"></div>
</div>
</div>
<!--视频音量-->
<div id="pdq-play-fullscreen" class="pdq-play-fullscreen"></div>
<!--全屏按钮-->
<div id="pdq-playback-rate" class="pdq-playback-rate">
<ul id="pdq-playback-list" class="pdq-playback-list">
<li>1.0x</li>
<li>2.0x</li>
<li>3.0x</li>
<li>4.0x</li>
</ul>
<div id="pdq-playback-text" class="pdq-playback-text">1.0x</div>
</div>
<!--视频菜单-->
<div id="pdq-play-menulist" class="pdq-play-menulist">
<ul id="pdq-course-list" class="pdq-course-list">
<li>高清</li>
<li>标清</li>
<li>流畅</li>
</ul>
<div id="pqd-menu-text" class="pqd-menu-text">标清</div>
</div>
<!--视频类型-->
<div id="pdq-play-course-type" class="pdq-play-course-type">
<ul id="pdq-playlist" class="pdq-playlist">
<li>重点</li>
<li>难点</li>
<li>复习</li>
<li>全部</li>
</ul>
<div id="pdq-type-text" class="pdq-type-text">全部</div>
</div>
<!--视频播放倍数-->
</div>
<div id="pdq-right-pause" class="pdq-right-pause"></div>
</div>
</div>
</body>
<script type="text/javascript">
$(function () {
(function ($, win, doc, undefined) {
var ControllDom = {
controlls: $("#pdq-controll-wrap"),
playbtn: $("#pdq-plago"), //播放按钮
progressBar: $("#pdq-progressBar"), //进度条
timer: $("#pdq-play-timer"), //时间显示
volumeBox: $("#pdq-play-volume"), //音量滑块
courseType: $("#pdq-play-course-type"), //视频类型
courseMenu: $("#pdq-play-menulist"), //视频菜单
playTimesbox: $("#pdq-playback-rate"), //播放倍数
fullScreenBtn: $("#pdq-play-fullscreen"), //全屏按钮
loading: $("#pdq-load-wrap"),
pausedBtn: $("#pdq-right-pause")
};
function XPVideoPlay(videoObject, option) {
this.videoObject = videoObject[0]; //video对象
this.volume = option.volume || "50%"; //初始化音量大小
this.type = option.type || "流畅"; //视频清晰度初始化
this.Rate = option.rate || 1
this.positionPlay = option.positionPlay || 0; //视频初始化位置
this.watermarkName = option.watermarkName || "";
this.videoUrl = option.videoUrl || null;
this.watermarTime = option.watermarTime || 100000;
this.arrVideoLink; //用于存储视频路径
this.overPlay = false;
this.init();
}
XPVideoPlay.prototype = {
//初始化入口
init: function () {
var _this = this;
this.getResVideo();
$(_this).on("application", _this.appVideo);
},
//获取视频资源
getResVideo: function () {
var _this = this;
$.post(_this.videoUrl, null, function (result) {
_this.arrVideoLink = result;
$(_this).trigger("application");
}, "JSON");
},
//功能入口
appVideo: function () {
var _this = this;
_this.initUploume(_this.volume); //初始化音量大小
_this.playVideo(); //播放/暂停
_this.videotype(_this.type, _this.positionPlay, _this.Rate); //切换视频清晰度
_this.videoPlayGo(); //开始播放
_this.Videoswitch(); //手动切换视频类型
_this.fullScreen(); //全屏按钮
_this.volumeControl(); //音量控制
_this.updatePlaybar(); //更新视频进度
_this.playTimes(); //播放倍数
},
//暂停/播放
playVideo: function () {
var _this = this;
$(_this.videoObject).on("click", function () {
ControllDom.playbtn.click();
});
ControllDom.pausedBtn.click(function () {
ControllDom.playbtn.click();
});
ControllDom.playbtn.on("click", function () {
var $this = $(this);
if (_this.videoObject.paused) {
$this.removeClass("stop");
ControllDom.controlls.addClass('vhidden');
_this.videoObject.play(); //播放
ControllDom.pausedBtn.hide();
if (_this.overPlay) {//当重新播放时再次启用水印
_this.overPlay = false;
_this.watermark().createMark(); //启用水印
}
} else {
_this.videoObject.pause(); //暂停
$this.addClass("stop");
ControllDom.pausedBtn.show();
}
});
},
//倍数播放
playTimes: function () {
var _this = this;
var ulBox = ControllDom.playTimesbox.find('ul')
var timeArr = ulBox.children();
var valuetime = ControllDom.playTimesbox.find('#pdq-playback-text');
timeArr.click(function () {
var $this = $(this);
var multiple = parseInt($this.text());
valuetime.text($(this).text());
$this.parent().hide();
_this.videoObject.playbackRate = multiple;
});
_this.upMenu(valuetime, ulBox);
},
//音量控制
volumeControl: function () {
var _this = this;
var isVolume = false;
var mutebtn = ControllDom.volumeBox.find("#pdq-play-icon");
var Round = ControllDom.volumeBox.find("#vloume-roud");
var volumeBg = ControllDom.volumeBox.find("#vloume-roud-bg");
var volumeSli = ControllDom.volumeBox.find("#vloume-roud-slider");
//静音切换
mutebtn.click(function () {
var $this = $(this);
if ($this.hasClass("mute")) {
if (_this.volume < 10) {
_this.initUploume("20%");
} else {
_this.initUploume(_this.volume);
}
} else {
_this.initUploume(0);
}
});
volumeSli.mousedown(function (e) {
var e = e || event;
upVloume(e);
});
//拖到圆球控制音量
Round.mousedown(function (e) {
isVolume = true;
})
volumeSli.mousemove(function (e) {
var e = e || event;
if (isVolume) {
upVloume(e);
}
})
$(document).mouseup(function () {
isVolume = false;
})
//更新音量大小
function upVloume(e) {
var volumeWidth = volumeSli.width();
var upWidth = e.pageX - $(e.target).offset().left;
Round.css({ left: (upWidth / volumeWidth) * 100 + "%" })
volumeBg.width((upWidth / volumeWidth) * 100 + "%");
//记录当前音量更新位置
_this.volume = (upWidth / volumeWidth) * 100;
try {
_this.videoObject.volume = upWidth / volumeWidth;
} catch (err) {
console.log(err)
}
_this.initUploume(_this.volume);
}
},
//初始化音量大小
initUploume: function (value) {
var _this = this;
var mutebtn = ControllDom.volumeBox.find("#pdq-play-icon")
var Round = ControllDom.volumeBox.find("#vloume-roud");
var volumeBg = ControllDom.volumeBox.find("#vloume-roud-bg");
if (value < 4) {
mutebtn.addClass("mute");
} else if (parseInt(value) * 100 > 0) {
mutebtn.removeClass("mute");
}
Round.stop().animate({ left: value }, 200);
volumeBg.stop().animate({ width: value }, 200);
_this.videoObject.volume = parseInt(value) / 100;
},
//更新播放进度
updatePlaybar: function () {
var _this = this;
var sliderBox = ControllDom.progressBar.find("#pdq-progress-hidebox");
var sliderBar1 = sliderBox.find("#pdq-progress-bgh");
var sliderBar2 = sliderBox.find("#pdq-progress-bgs");
var sliderbtn = sliderBox.find("#pdq-slider-button");
var mousebar = sliderBox.find("#pdq-progress-mouse-bar");
var showBar = sliderBox.find("#pdq-progress-bgs");
var timeShow = sliderBox.find("#pdq-progress-timeShow");
//更新视频进度
function sliderProgress() {
var offsetX = 0;
var isMove = false;
var moveX = 0;
//进度条任意点进行更新
mousebar.mousedown(function (e) {
updataprogress(e.pageX - $(this).offset().left);
_this.videoObject.play();
ControllDom.playbtn.removeClass("stop");
});
//当按下圆球
sliderbtn.mousedown(function (evente) {
isMove = true;
offsetX = event.pageX - $(this).position().left;
});
//鼠标经过进度条展现锚点时间
mousebar.mousemove(function (event) {
var maxWidth = sliderBox.width();
var nowX = event.pageX - $(event.target).offset().left;
var timeShowWith = timeShow.outerWidth();
//计算当前鼠标经过的时间段 = 总时长*(当前偏移量/进度条最大长度)
var nowTime = _this.timeFormat(_this.videoObject.duration * (nowX / maxWidth));
timeShow.css({ left: nowX / maxWidth * 100 + "%" }).text(nowTime).css({ marginLeft: -timeShowWith / 2 });
//锚点时间展现不能超出播放器大小
if (nowX >= (maxWidth - timeShowWith / 2)) {
timeShow.css({ left: maxWidth - timeShowWith / 2 });
} else if (nowX <= timeShowWith / 2) {
timeShow.css({ left: timeShowWith / 2 });
}
});
//开始滑动
$(doc).mousemove(function (event) {
var sliderbtnLeft = sliderbtn.position().left;
//判断是否执行更新进度
if (isMove) {
//获取鼠标实际移动的X轴距离
var moveX = event.pageX - offsetX;
if (sliderbtnLeft <= sliderbtn.width()) {
moveX = sliderbtn.width();
isMove = true;
} else if (sliderbtnLeft > sliderbtn.parent().width() - sliderbtn.width()) {
moveX = sliderbtn.parent().width();
//如果拖到距离大于进度条的最大长度将拖动状态取消
isMove = false;
return false;
}
//更新视频进度
updataprogress(moveX);
return false;
}
//当鼠标抬起
}).mouseup(function () {
isMove = false;
});
function updataprogress(x) {
var maxduration = _this.videoObject.duration;
var maxWidth = sliderBox.width();
var changeoren = x / maxWidth * 100;
if (changeoren > 100) {
changeoren = 100;
} else if (changeoren < 0) {
changeoren = 0;
}
sliderbtn.css({ left: changeoren + '%' });
sliderBar1.width(changeoren + '%');
sliderBar2.width(changeoren + "%");
_this.videoObject.currentTime = maxduration * changeoren / 100;
return false;
}
}
sliderProgress();
},
//初始化视频类型
videotype: function (type, timer, rate) {
var _this = this;
_this.arrVideoLink;
switch (type) {
case "流畅":
$(_this.videoObject).attr("src", _this.arrVideoLink.source[0].LD);//流畅
break;
case "标清":
$(_this.videoObject).attr("src", _this.arrVideoLink.source[1].HD);//标清
break;
case "高清":
$(_this.videoObject).attr("src", _this.arrVideoLink.source[2].SD);//高清
break;
}
_this.videoObject.currentTime = timer;
_this.videoObject.playbackRate = rate;
},
//视频切换
Videoswitch: function () {
var _this = this;
var menuParent = ControllDom.courseMenu;
var MenuBox = menuParent.find("ul")
var listMenu = MenuBox.children();
var valueType = menuParent.find('#pqd-menu-text');
listMenu.click(function () {
nowTime = _this.videoObject.currentTime;
nowRate = _this.videoObject.playbackRate
var texType = $(this).text();
valueType.text(texType);
$(this).parent().hide();
//切换视频&类型&进度&速率
_this.videotype(texType, nowTime, nowRate);
});
_this.upMenu(valueType, MenuBox);
},
//开始播放
videoPlayGo: function () {
var _this = this;
var nowTime = 0; //当前播放位置
var AllTime = 0; //视频时长
var timebox = _this.timer;
var nowSpan = ControllDom.timer.find("#pqd-nowTime");
var allSpan = ControllDom.timer.find("#pdq-allTime");
_this.watermark(true).createMark(); //启用水印
//当浏览器已加载音频/视频的元数据时
$(_this.videoObject).on("loadedmetadata", function (e) {
AllTime = _this.videoObject.duration
allSpan.text(_this.timeFormat(_this.videoObject.duration));
});
//当视频播放结束
$(_this.videoObject).on("ended", function () {
ControllDom.playbtn.addClass("stop");
_this.overPlay = true;
});
//当目前的播放位置已更改时
$(_this.videoObject).on('timeupdate', function (e) {
var nowTime = _this.videoObject.currentTime;
nowSpan.text(_this.timeFormat(_this.videoObject.currentTime));
ControllDom.progressBar.find("#pdq-progress-bgs").width((nowTime / AllTime) * 100 + "%");
ControllDom.progressBar.find("#pdq-progress-bgh").width((nowTime / AllTime) * 100 + "%");
ControllDom.progressBar.find("#pdq-slider-button").css({ left: (nowTime / AllTime) * 100 + "%" });
ControllDom.progressBar.find("#pdq-progress-buff").width(_this.videoObject.buffered.end(0) / AllTime * 100 + "%");
});
//当视频已开始播放时
$(_this.videoObject).on("playing", function () {
ControllDom.loading.hide();
});
//当视频已停止播放但打算继续播放时
$(_this.videoObject).on("waiting", function () {
ControllDom.loading.show();
});
//当文件就绪可以开始播放时运行的脚本（缓冲已足够开始时）
$(_this.videoObject).on("canplay", function () {
ControllDom.loading.hide();
});
},
//时间格式化
timeFormat: function (value) {
var time;
if (value > -1) {
var h = Math.floor(value / 3600) > 10 ? Math.floor(value / 3600) : Math.floor(value / 3600) == 0 ? "" : "0" + Math.floor(value / 3600);
var m = Math.floor(value / 60) % 60 > 10 ? Math.floor(value / 60) % 60 : "0" + Math.floor(value / 60) % 60;
var s = value % 60 > 10 ? Math.floor(value % 60) : "0" + Math.floor(value % 60);
time = (h == 0 ? "" : h + ":") + m + ":" + s;
}
return time;
},
//水印
watermark: function () {
var _this = this;
var moveWith = $(_this.videoObject).width();
var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');
var PlayMark = {
font: "14px microsoft yahei",
style: "#fff",
text: _this.watermarkName,
clearMark: function () {
clearTimeout(window.mk);
},
createMark: function () {
var offset = 0;
var overmark = false;
var $this = this;
canvas.style.zIndex = 21474836478;
canvas.style.left = 0;
canvas.width = 200;
canvas.height = 25;
canvas.style.top = 20 + "px"
canvas.style.position = "absolute";
context.fillStyle = PlayMark.style;
context.font = PlayMark.font;
context.fillText(PlayMark.text, 10, 20);
_this.videoObject.parentNode.insertBefore(canvas, null);
window.mk = setInterval(function () {
offset += 10;
canvas.style.left = offset + "px";
var left = canvas.style.left;
if (parseInt(left) > moveWith) {
clearInterval(window.mk);
_this.videoObject.parentNode.removeChild(canvas);
timeMark = setTimeout(PlayMark.createMark, _this.watermarTime);
if (_this.overPlay) { //判断视频是否播放完毕
clearTimeout(timeMark);
}
}
}, 100);
}
}
return PlayMark;
},
//全屏
fullScreen: function () {
var _this = this;
var $this = null;
var isFullScreen = false;
var videos = document.getElementById("videoObject")
ControllDom.fullScreenBtn.click(function () {
$this = $(this);
if ($(this).hasClass('cancleScreen')) {
if (doc.exitFullscreen) {
doc.exitFullscreen();
} else if (doc.mozCancelFullScreen) {
doc.mozCancelFullScreen();
} else if (doc.webkitExitFullscreen) {
doc.webkitExitFullscreen();
}
} else {
if (_this.videoObject.requestFullscreen) {
_this.videoObject.requestFullscreen();
} else if ($("#videoObject")[0].mozRequestFullScreen) {
// 火狐好像不允许同级元素全屏坑点在这里直接把父级全屏
$("#videoObject")[0].mozRequestFullScreen();
} else if (_this.videoObject.webkitRequestFullscreen) {
_this.videoObject.webkitRequestFullscreen();
} else if (_this.videoObject.msRequestFullscreen) {
_this.videoObject.msRequestFullscreen();
}
}
});
//浏览器全屏无法监听到ESC键盘事件试了好几种方法还是有个别浏览器没有不能兼容
win.onresize = function () {
//当浏览器窗口发生变化时判断此时全屏按钮状态来改变样式
if (ControllDom.fullScreenBtn.hasClass("cancleScreen")) {
ControllDom.fullScreenBtn.removeClass('cancleScreen');
} else {
ControllDom.fullScreenBtn.addClass('cancleScreen');
}
if (!checkFull()) {
ControllDom.fullScreenBtn.removeClass('cancleScreen');
}
}
function checkFull() {
var isFull = doc.fullscreenElement ||
doc.mozFullScreenElement ||
doc.webkitFullscreenElement ||
doc.msFullscreenEnabled ||
doc.fullscreenEnabled ||
doc.webkitIsFullScreen;
if (isFull === undefined) isFull = false;
return isFull;
}
},
//菜单显示隐藏
upMenu: function (menuEl, menuBox) {
function Upmenu(menuEl, menuBox) {
this.time = null;
this.Menuname = menuEl;
this.Menuconten = menuBox;
this.init = function () {
this.hoverBtn();
this.hoverConten();
};
return this.init();
}
Upmenu.prototype = {
constructor: Upmenu,
ShowContent: function (index) {
this.Menuconten.stop().show(0);
},
HedeContent: function (that) {
this.Menuconten.stop().hide(0, function () {
that.removeClass("oen")
});
},
hoverBtn: function () {
var self = this
this.Menuname.hover(function () {
$(this).addClass("active")
self.ShowContent()
}, function () {
var $this = $(this);
self.time = setTimeout(function () {
self.HedeContent($this);
self.Menuname.removeClass("active");
}, 200);
});
},
hoverConten: function () {
var self = this
self.Menuconten.hover(function () {
clearTimeout(self.time)
}, function () {
$(this).hide()
self.Menuname.removeClass("active")
});
},
}
return new Upmenu(menuEl, menuBox);
},
}
window.XPVideoPlay = XPVideoPlay;
})(jQuery, window, document);
new XPVideoPlay($("#videoView"), {
videoUrl: "http://www.xipwang.cn/json/video.json", //视频数据
volume: "50%", // 初始化音量大小
positionPlay: 0, //初始化播放位置秒为单位;
watermarkName: "H5自制视频播放器", // 水印文字
watermarTime: 100000 //水印每隔多久出现一次
});
});
// http://www.xipwang.cn/json/video.json
</script>
</html>
552
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
