<html>
<head>
<title>视频缓冲动画&&视频多级联动</title>
<meta name="keyword" content="视频缓冲动画&&视频多级联动">
<meta name = 'discription' content="视频缓冲动画&&视频多级联动">
<meta charset="utf-8">
<script src='http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js'></script>
<script></script>
<style>
.video-img {
position: relative;
margin: 0 auto;
width: 80%;
}
.video-img video {
width: 100%;
}
.waiting i {
display: block;
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 50px;
height: 50px;
background-color: #fff;
background-image: url(../images/loading-icon.png);
background-repeat: no-repeat;
background-size: 60px 60px;
background-position: center center;
transform: translate(-50%, -50%);
margin-top: -20px;
margin-left: -30px;
animation: spin 2s linear infinite;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div class="video-img">
<video id="video1" poster="http://www.fuda120.com/uploads/allimg/160622/8-1606221RQ70-L.png" data-src="http://video.fuda120.com/#upload/201602/25/201602250822463464.mp4|upload/201602/25/201602250823408775.mp4|upload/201602/25/201602250824382938.mp4|upload/201602/25/201602250825337859.mp4|upload/201602/25/201602250831334105.mp4|upload/201602/25/201602250840117711.mp4|upload/201602/25/201602250840436350.mp4|upload/201602/25/201602250843321836.mp4|upload/201602/25/201602250845212228.mp4|201602/25/201602250848533420.mp4|upload/201602/25/201602250849551285.mp4|upload/201602/25/201602250852086762.mp4|upload/201602/25/201602250853394423.mp4|upload/201602/25/201602250857079383.mp4" controls="controls"></video>
<i></i>
</div>
<script>
var videoObj = $("video");
var is_play = true;
videoObj.on("click", function() {
var obj = $(this);
var src = obj.attr("data-src");
if (!obj.attr("src")) {
playVideo(src, $(this));
} else {
if (obj[0].paused == true) { // 视频暂停,播放
obj[0].play();
} else {
obj[0].pause();
}
}
})
videoObj.on("waiting", function() {
var pObj = videoObj.parent().attr("style", "position: relative;"); //视频在缓冲
pObj.addClass("waiting");
})
videoObj.on("canplaythrough", function() {
var pObj = videoObj.parent().attr("style", "position: relative;"); //视屏在播放
pObj.removeClass("waiting");
})
function playVideo(src, nowObj) {
var detail = src || 'http://video.fuda120.com/upload/201602/29/201602291008579880.mp4'; //默认播放地址
var cur_index = 0;
var videos = [];
function initVideoURL(detail) {
videos.length = 0;
cur_index = 0;
if (detail.indexOf('#') > 0) {
var info = detail.split('#');
var domain = info[0]; //分割出来的域名
var url_arr = info[1];
var child = url_arr.split('|');
for (var i = 0; i < child.length; i++) {
videos.push(domain + child[i]);
}
} else {
videos.push(detail);
}
/* console.log(videos);*/
}
//播放视频
function play_video(url, img) {
nowObj.attr("src", url);
nowObj.attr("poster", img);
nowObj.attr("autoplay", "autoplay");
nowObj.on("ended", function() {
playerstop();
})
}
//事件监控 连播.分段视频
function playerstop() {
cur_index++;
if (cur_index == videos.length) {
cur_index = 0;
} else
play_video(videos[cur_index], '');
}
$('.nobfdtys').each(function() { //遍历删除已存在的 li
var arcid = $(this).attr('arcid');
if (977 == parseInt(arcid)) {
$(this).remove();
}
});
//开始播放第一条
function StartVideo() {
if (arguments.length <= 1) {
play_video(videos[0], '');
} else {
var obj = arguments[0];
var video_url = obj.getAttribute('video');
var titles = obj.getAttribute('titles');
var vinfo = obj.getAttribute('vinfo');
var desc = obj.getAttribute('desc');
var moreurl = obj.getAttribute('moreurl');
$("#sptitle").html(titles);
$(".spydz p").html(vinfo);
$(".jjnr").html(desc);
$(".jjnr").append("<a style='color:red;' href='" + moreurl + "'>[更多内容]</a>");
/*setStatus(obj);*/
initVideoURL(video_url); //处理视频地址
play_video(videos[0], '');
}
}
function setStatus(obj) {
if (obj) {
var _parent = obj.parentNode;
var lis = _parent.children;
for (var i = 0; i < lis.length; i++) {
lis[i].setAttribute('class', 'nobfdtys');
}
obj.setAttribute('class', 'okbfdtys');
}
}
initVideoURL(detail);
StartVideo();
}
</script>
</body>
</html>
