https://xiaoyezi.com/vendor/js/jquery.videoPlay.js

1;(function($){
2
3  //加载依赖库
4  (function(){
5    var script = document.createElement("script");
6    script.src="https://player.youku.com/jsapi";
7    $("head")[0].appendChild(script);
8  })();
9
10  var boxHtml = '<div class="v-video-box"><div class="lay"></div><div class="content"><i class="close-btn">&times;</i></div></div>';
11  var $box = $(boxHtml);
12
13  function open(content,type,url,obj){
14    removeBox();
15    $box.appendTo(document.body);
16    $content = $box.find('.content');
17    var $media = $(obj).data('media')||[];
18    if($media.length <= 0){
19      $media = $(content);
20      $(obj).data('media',$media);//将弹窗内容缓存起来，提升dom性能，视频播放流畅性
21    }
22    if(type == 'image'){
23      $content.append("<span>图片加载中.......</span>");
24      //处理图片弹窗定位
25      var tmpImg = new Image();
26      tmpImg.onload = function(){
27        $content.find('span').remove().end().append($media);
28        setPosition($content);
29      };
30      tmpImg.src = url;
31    }else if(type == "video"){
32      $content.append($media);
33      $video = $content.find('video');
34      $video[0].play();
35      $video.on("loadeddata",function(){
36        setPosition($content);
37      });
38    }else{
39      $content.append($media);
40    }
41    //重新定位
42    setPosition($content);
43
44    $box.animate({"opacity":1});
45    $box.on('click','.lay,.close-btn',function(){
46      $box.animate({"opacity":0},function(){
47        var $video = $(this).find('video');
48        if($video.length > 0){
49          $video[0].pause();
50        }
51        removeBox();
52      });
53    });
54
55  }
56
57  function setPosition($content){
58    var w = $content.outerWidth(), h = $content.outerHeight();
59    $content.css({'margin-left':-w/2,"margin-top":-h/2});
60  }
61
62  function removeBox(){
63    $box.find('.close-btn').siblings().remove();
64    $box.remove();
65  }
66
67  function show(url,type,obj){
68    var str = '';
69    switch(type){
70      case 'video':
71        str='<video class="video" controls="controls" autoplay="true" loop="false"><source src="'+url+'" type="video/mp4" /><embed type="application/x-shockwave-flash" src="/resources/player.swf?v1.3.5" flashvars="controls=console&skin=/resources/skins/mySkin.swf&video='+url+'&autoplay=1" allowScriptAccess="always" wmode="transparent" /></video>';
72        break;
73      case 'youku':
74        str='<div id="youkuplayer" class="noad-box"></div><script>player = new YKU.Player(\'youkuplayer\',{styleid: \'0\',client_id: \'4c2b6b03f4236873\',vid: \''+url+'\'});<\/script>';
75        break;
76      case 'image':
77        str='<img src="'+url+'" alt="">';
78        break;
79    }
80    open(str,type,url,obj);
81  }
82
83  $.fn.playVideo = function(options){
84    var selector = this.selector;
85    $(document).on('click',selector,function(){
86      var youkuId = $(this).data('youku');
87      var youkuId = $(this).attr('data-youku');
88      var image = $(this).data('image');
89      var url = $(this).data('url');
90      if (!!youkuId) {
91        show(youkuId,'youku',this);
92      }
93      if (!!url) {
94        show(url,'video',this);
95      }
96      if (!!image) {
97        show(image,'image',this);
98      }
99    });
100    return this;
101  };
102  //执行插件方法
103  $('.play').playVideo();
104
105})(jQuery);