<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>