var RUN = {
  isMobile: function () {
    var userAgentInfo = navigator.userAgent,
      Agents = [
        'Android',
        'iPhone',
        'SymbianOS',
        'Windows Phone',
        'iPad',
        'iPod',
      ],
      flag = false
    for (var v = 0; v < Agents.length; v++) {
      if (userAgentInfo.indexOf(Agents[v]) > 0) {
        flag = true

        break
      }
    }
    return flag
  },
  isIE: function () {
    if (!!window.ActiveXObject || 'ActiveXObject' in window) return true
    else return false
  },
  adaptive: function () {
    //移动端适配
    window['adaptive'].desinWidth = 750
    window['adaptive'].baseFont = 28
    window['adaptive'].setRemCallback = function () {}
    window['adaptive'].init()
  },
  singVideo: function (dom, data, size, autoPlay) {
    //单个视频播放器，可重复调用
    if (
      data.poster == '' ||
      data.poster == null ||
      data.poster == 'undefined'
    ) {
      data.poster = 'https://crculture.crc.com.cn//assets/images/video-def.jpg'
    }
    var data = data,
      dom = dom,
      size = size
    var html =
      '<div id="jp_container_' +
      dom.attr('data-id') +
      '" class="jp-video jp-video-def" role="application" aria-label="media player">' +
      '<div class="jp-type-single"><div id="jquery_jplayer_' +
      dom.attr('data-id') +
      '" class="jp-jplayer"></div>' +
      '<div class="jp-video-play"> <button class="jp-video-play-icon" role="button" tabindex="0">play</button> </div>' +
      '<div class="jp-gui"><div class="jp-interface"> <div class="jp-progress"><div class="jp-seek-bar"> <div class="jp-play-bar"></div>' +
      '</div> </div><div class="jp-controls-holder"><div class="jp-controls"><button class="jp-play" role="button" tabindex="0">play</button>' +
      '<button class="jp-stop" role="button" tabindex="0">stop</button><div class="jp-time-wrap">' +
      '<div class="jp-current-time" role="timer" aria-label="time">&nbsp;</div> <div class="jp-duration" role="timer" aria-label="duration">&nbsp;</div>' +
      '</div></div><div class="jp-toggles"><button class="jp-full-screen" role="button" tabindex="0">full screen</button></div>' +
      '<div class="jp-volume-controls"><div class="jp-volume-bar"><div class="jp-volume-bar-value"><div class="jp-volumn-dot"></div></div></div><button class="jp-mute" role="button" tabindex="0">mute</button></div></div> </div></div></div></div>'
    dom.empty().html(html)
    if (RUN.isMobile()) {
      var domPlay = $('#jquery_jplayer_' + dom.attr('data-id'))
      $('#jp_container_' + dom.attr('data-id')).addClass("jp-video-mob");
      var calVid = (size.width / size.height);
      size.height = parseInt($('#jp_container_' + dom.attr('data-id')).parent().width() / calVid);
      $(window).resize(function () {
        console.log(($('#jp_container_' + dom.attr('data-id')).parent().width()));
        size.height = parseInt($('#jp_container_' + dom.attr('data-id')).parent().width()) / calVid;
        $('#jp_container_' + dom.attr('data-id')).height(size.height);
        domPlay.height(size.height).find("video").height(size.height);
      });

      size.width = '100%'
      var singleVideo = domPlay.jPlayer({
        ready: function () {
          $(this).jPlayer('setMedia', data)
          $(this).find('video').attr({
            'x5-playsinline': 'true',
            'x-webkit-airplay': 'allow',
            playsinline: 'true',
            'webkit-playsinline': 'true',
            disablepictureinpicture: 'true',
            controls: 'false',
          })
          $(this).find('video').removeAttr("controls")
        },
        play: function (event) {
          $(this).parent().find('.jp-video-play').remove()
          $(this).jPlayer('pauseOthers')
          $(this).find('video').attr({
            controls: true,
          })
        },
        pause: function () { 
          $(this).parent().find('.jp-video-play').hide()
        },
        swfPath: '../../dist/jplayer',
        supplied: 'webmv, ogv, m4v',
        size: size,
        fullWindow: false,
        noFullWindow: {
          android_phone: /android.*?mobile/,
          iphone: /iphone/,
        },
        nativeVideoControls: {
          all: /./,
        },
        preload: 'auto',
        useStateClassSkin: true,
        cssSelectorAncestor: '#jp_container_' + dom.attr('data-id'),
        autoBlur: true,
        smoothPlayBar: true,
        keyEnabled: true,
        remainingDuration: false,
        toggleDuration: true,
      })
    } else {
      if (size.width < 400) {
        $('.jp-video-play').height('100%')
        size.width += 'px'
        size.height += 'px'
        var domPlay = $('#jquery_jplayer_' + dom.attr('data-id'))
        domPlay.jPlayer({
          ready: function () {
            $(this).jPlayer('setMedia', data)
            domPlay
              .parent()
              .find('.jp-mute')
              .on('mouseover', function () {
                var that = $(this)
                $(this).prev().css({
                  visibility: 'visible',
                })
                $(this).parent().addClass('jp-volume-controls-sel')
                $(this)
                  .parent()
                  .off()
                  .mouseleave(function () {
                    $(this).removeClass('jp-volume-controls-sel')
                    that.prev().css({
                      visibility: 'hidden',
                    })
                  })
              })
            if (autoPlay) {
              $(this).jPlayer('play')
            }
          },
          play: function () {
            $(this).find('video').attr('controls', true)
            $(this).jPlayer('pauseOthers')
            $(this).parent().find('.jp-video-play').hide()
          },
          pause: function () {},
          ended: function () {
            $(this).jPlayer('stop')
            $(this).parent().find('.jp-video-play').show()
          },
          swfPath: '../../dist/jplayer',
          supplied: 'webmv, ogv, m4v',
          size: size,
          useStateClassSkin: true,
          cssSelectorAncestor: '#jp_container_' + dom.attr('data-id'),
          autoBlur: true,
          noFullWindow: {
            android_phone: /android.*?mobile/,
            iphone: /iphone/,
          },
          nativeVideoControls: {
            all: /./,
          },
          smoothPlayBar: true,
          keyEnabled: true,
          remainingDuration: false,
          toggleDuration: true,
        })
      } else {
        $('#jp_container_' + dom.attr('data-id')).css('width', size.width)
        size.width += 'px'
        size.height += 'px'
        var domPlay = $('#jquery_jplayer_' + dom.attr('data-id'))
        domPlay.jPlayer({
          ready: function () {
            $(this).jPlayer('setMedia', data)
            domPlay
              .parent()
              .find('.jp-mute')
              .on('mouseover', function () {
                var that = $(this)
                $(this).prev().css({
                  visibility: 'visible',
                })
                $(this).parent().addClass('jp-volume-controls-sel')
                $(this)
                  .parent()
                  .off()
                  .mouseleave(function () {
                    $(this).removeClass('jp-volume-controls-sel')
                    that.prev().css({
                      visibility: 'hidden'
                    })
                  })
              })
            if (autoPlay) {
              $(this).jPlayer('play')
            }
          },
          play: function () {
            $(this).jPlayer('pauseOthers')
            $(this).parent().find('.jp-video-play').hide()
            $(this).on('click', function () {
              $(this).jPlayer('pause')
            })
          },
          pause: function () {
            $(this).parent().find('.jp-video-play').show()
          },
          ended: function () {
            $(this).jPlayer('stop')
            $(this).parent().find('.jp-video-play').show()
          },
          swfPath: '../../dist/jplayer',
          supplied: 'webmv, ogv, m4v',
          size: size,
          useStateClassSkin: true,
          cssSelectorAncestor: '#jp_container_' + dom.attr('data-id'),
          autoBlur: true,
          smoothPlayBar: true,
          keyEnabled: true,
          remainingDuration: false,
          toggleDuration: true
        })
      }
    }
  },
  videoOpen: function (dom, data, size) {
    if (
      data.poster == '' ||
      data.poster == null ||
      data.poster == 'undefined'
    ) {
      data.poster = 'https://crculture.crc.com.cn//assets/images/video-def.jpg'
    }
    var html =
      '<div class="jp-mask"></div><div id="jp_container_' +
      dom.attr('data-id') +
      '" class="jp-video jp-video-open" role="application" aria-label="media player"><div class="jp-close"></div>' +
      '<div class="jp-type-single"> <div id="jquery_jplayer_' +
      dom.attr('data-id') +
      '" class="jp-jplayer"></div><div class="jp-video-play">' +
      '<button class="jp-video-play-icon" role="button" tabindex="0">play</button></div><div class="jp-gui">' +
      '<div class="jp-interface"><div class="jp-progress"><div class="jp-seek-bar"><div class="jp-play-bar"></div></div></div>' +
      '<div class="jp-controls-holder"><div class="jp-controls"><button class="jp-play" role="button" tabindex="0">play</button>' +
      '<button class="jp-stop" role="button" tabindex="0">stop</button><div class="jp-time-wrap"><div class="jp-current-time" role="timer" aria-label="time">&nbsp;</div>' +
      '<div class="jp-duration" role="timer" aria-label="duration">&nbsp;</div></div></div>' +
      '<div class="jp-toggles"><button class="jp-full-screen" role="button" tabindex="0">full screen</button></div>' +
      '<div class="jp-volume-controls"><div class="jp-volume-bar"><div class="jp-volume-bar-value"><div class="jp-volumn-dot"></div></div></div><button class="jp-mute" role="button" tabindex="0">mute</button></div></div></div></div></div></div>'
    dom.off().on('click', function () {
      $('#jp_container_' + dom.attr('data-id')).remove()
      $('body').append(html)

      $('.jp-mask,.jp-close')
        .off()
        .on('click', function () {
          $('#jp_container_' + dom.attr('data-id')).remove()
          $('.jp-mask').remove()
        })
      if (RUN.isMobile()) {
        $(".jp-video-open").width("100%").css({ "margin-left": 0, "left": 0 });
        var domPlay = $('#jquery_jplayer_' + dom.attr('data-id'))
        $('#jp_container_' + dom.attr('data-id')).addClass("jp-video-mob");
        var calVid = (size.width / size.height);
        size.height = parseInt($('#jp_container_' + dom.attr('data-id')).parent().width() / calVid);
        $(window).resize(function () {
          size.height = parseInt($('#jp_container_' + dom.attr('data-id')).parent().width()) / calVid;
          $('#jp_container_' + dom.attr('data-id')).height(size.height);
          domPlay.height(size.height).find("video").height(size.height);
        });

        $(window).resize(function() {
          size.height = $('#jp_container_' + dom.attr('data-id')).parent().width() / (size.width / size.height);
        });
        size.width = '100%'
        var singleVideo = $('#jquery_jplayer_' + dom.attr('data-id')).jPlayer({
          ready: function () {
            $(this).jPlayer('setMedia', data)
            $('#jp_container_' + dom.attr('data-id')).height(
              $('#jquery_jplayer_' + dom.attr('data-id')).height()
            )
            $(this).find('video').attr({
              'x5-playsinline': 'true',
              'x-webkit-airplay': 'allow',
              playsinline: '',
              controls: false
            })
            $(this).find('video').removeAttr("controls")
          },
          play: function (event) {
            $(this).jPlayer('pauseOthers')
            $(this).find('video').attr({
              controls: true,
            })
            $(this).parent().find('.jp-video-play').remove()
          },
          pause: function () { 
            $(this).parent().find('.jp-video-play').hide()
          },
          swfPath: '../../dist/jplayer',
          supplied: 'webmv, ogv, m4v',
          size: size,
          fullWindow: false,
          noFullWindow: {
            android_phone: /android.*?mobile/,
            iphone: /iphone/,
          },
          nativeVideoControls: {
            all: /./
          },
          preload: 'auto',
          cssSelectorAncestor: '#jp_container_' + dom.attr('data-id'),
          useStateClassSkin: true,
          autoBlur: true,
          smoothPlayBar: true,
          keyEnabled: true,
          remainingDuration: false,
          toggleDuration: true
        })
      } else {
        $('.jp-video-open').css({
          width: size.width,
          marginLeft: (size.width / 2) * -1,
          marginTop: (size.height / 2) * -1 - 40,
        })

        var singleVideo = $('#jquery_jplayer_' + dom.attr('data-id')).jPlayer({
          ready: function () {
            $(this).jPlayer('setMedia', data)
            $('#jp_container_' + dom.attr('data-id'))
              .parent()
              .find('.jp-mute')
              .on('mouseover', function () {
                var that = $(this)
                $(this).prev().css({
                  visibility: 'visible',
                })
                $(this).parent().addClass('jp-volume-controls-sel')
                $(this)
                  .parent()
                  .off()
                  .mouseleave(function () {
                    $(this).removeClass('jp-volume-controls-sel')
                    that.prev().css({
                      visibility: 'hidden',
                    })
                  })
              })

            if (RUN.isIE()) {
              var that = $(this)
              $(this)
                .parent()
                .find('.jp-full-screen')
                .on('click', function () {
                  if (that.parent().parent().hasClass('jp-video-full')) {
                    that.parent().parent().addClass('jp-video-full-style')
                  } else {
                    that.parent().parent().removeClass('jp-video-full-style')
                  }
                })

              window.onresize = function () {
                if (that.parent().parent().hasClass('jp-video-full')) {
                  that.parent().parent().addClass('jp-video-full-style')
                } else {
                  that.parent().parent().removeClass('jp-video-full-style')
                }
              }
            }
          },
          play: function () {
            $(this).jPlayer('pauseOthers')
            $(this).parent().find('.jp-video-play').hide()
            $(this).on('click', function () {
              $(this).jPlayer('pause')
            })
          },
          pause: function () {
            $(this).parent().find('.jp-video-play').show()
          },
          swfPath: '../../dist/jplayer',
          supplied: 'webmv, ogv, m4v',
          size: size,
          useStateClassSkin: true,
          cssSelectorAncestor: '#jp_container_' + dom.attr('data-id'),
          autoBlur: true,
          smoothPlayBar: true,
          keyEnabled: true,
          remainingDuration: false,
          toggleDuration: true
        })
      }
    })
  },
  videoListOpen: function (dom, data, size) {
    if (
      data.poster == '' ||
      data.poster == null ||
      data.poster == 'undefined'
    ) {
      data.poster = 'https://crculture.crc.com.cn//assets/images/video-def.jpg'
    }
    var html =
      '<div class="jp-mask"></div><div id="jp_container_' +
      dom.attr('data-id') +
      '" class="jp-video jp-video-open" role="application" aria-label="media player"><div class="jp-close"></div>' +
      '<div class="jp-type-single"> <div id="jquery_jplayer_' +
      dom.attr('data-id') +
      '" class="jp-jplayer"></div><div class="jp-video-play">' +
      '<button class="jp-video-play-icon" role="button" tabindex="0">play</button></div><div class="jp-gui">' +
      '<div class="jp-interface"><div class="jp-progress"><div class="jp-seek-bar"><div class="jp-play-bar"></div></div></div>' +
      '<div class="jp-controls-holder"><div class="jp-controls"><button class="jp-play" role="button" tabindex="0">play</button>' +
      '<button class="jp-stop" role="button" tabindex="0">stop</button><div class="jp-time-wrap"><div class="jp-current-time" role="timer" aria-label="time">&nbsp;</div>' +
      '<div class="jp-duration" role="timer" aria-label="duration">&nbsp;</div></div></div>' +
      '<div class="jp-toggles"><button class="jp-full-screen" role="button" tabindex="0">full screen</button></div>' +
      '<div class="jp-volume-controls"><div class="jp-volume-bar"><div class="jp-volume-bar-value"><div class="jp-volumn-dot"></div></div></div><button class="jp-mute" role="button" tabindex="0">mute</button></div></div></div></div></div></div>'
    $('#jp_container_' + dom.attr('data-id')).remove()
    $('body').append(html)

    $('.jp-mask,.jp-close')
      .off()
      .on('click', function () {
        $('#jp_container_' + dom.attr('data-id')).remove()
        $('.jp-mask').remove()
      })
    if (RUN.isMobile()) {

      var domPlay = $('#jquery_jplayer_' + dom.attr('data-id'))
      $('#jp_container_' + dom.attr('data-id')).addClass("jp-video-mob");
      $(".jp-video-open").width("100%").css({ "margin-left": 0, "left": 0 });
        $('#jp_container_' + dom.attr('data-id')).addClass("jp-video-mob");
        var calVid = (size.width / size.height);
        size.height = parseInt($('#jp_container_' + dom.attr('data-id')).parent().width() / calVid);
        $(window).resize(function () {
          size.height = parseInt($('#jp_container_' + dom.attr('data-id')).parent().width()) / calVid;
          $('#jp_container_' + dom.attr('data-id')).height(size.height);
          domPlay.height(size.height).find("video").height(size.height);
        });
      
      size.width = '100%'
      $('#jquery_jplayer_' + dom.attr('data-id')).addClass("jp-video-mob");
      var singleVideo = $('#jquery_jplayer_' + dom.attr('data-id')).jPlayer({
        ready: function () {
          $(this).jPlayer('setMedia', data)
          $('#jp_container_' + dom.attr('data-id')).height(
            $('#jquery_jplayer_' + dom.attr('data-id')).height()
          )
          $(this).find('video').attr({
            'x5-playsinline': 'true',
            'x-webkit-airplay': 'allow',
            playsinline: '',
            controls: false
          });
        },
        play: function (event) {
          $(this).parent().find('.jp-video-play').remove()
          $(this).jPlayer('pauseOthers')
          $(this).find('video').attr({
            controls: true
          })
        },
        pause: function () { 
          $(this).parent().find('.jp-video-play').hide()
        },
        swfPath: '../../dist/jplayer',
        supplied: 'webmv, ogv, m4v',
        size: size,
        fullWindow: false,
        noFullWindow: {
          android_phone: /android.*?mobile/,
          iphone: /iphone/
        },
        nativeVideoControls: {
          all: /./
        },
        preload: 'auto',
        cssSelectorAncestor: '#jp_container_' + dom.attr('data-id'),
        useStateClassSkin: true,
        autoBlur: true,
        smoothPlayBar: true,
        keyEnabled: true,
        remainingDuration: false,
        toggleDuration: true
      })
    } else {
      $('.jp-video-open').css({
        width: size.width,
        marginLeft: (size.width / 2) * -1,
        marginTop: (size.height / 2) * -1 - 40,
      })

      var singleVideo = $('#jquery_jplayer_' + dom.attr('data-id')).jPlayer({
        ready: function () {
          $(this).jPlayer('setMedia', data)
          $('#jp_container_' + dom.attr('data-id'))
            .parent()
            .find('.jp-mute')
            .on('mouseover', function () {
              var that = $(this)
              $(this).prev().css({
                visibility: 'visible'
              })
              $(this).parent().addClass('jp-volume-controls-sel')
              $(this)
                .parent()
                .off()
                .mouseleave(function () {
                  $(this).removeClass('jp-volume-controls-sel')
                  that.prev().css({
                    visibility: 'hidden'
                  })
                })
            })

          if (RUN.isIE()) {
            var that = $(this)
            $(this)
              .parent()
              .find('.jp-full-screen')
              .on('click', function () {
                if (that.parent().parent().hasClass('jp-video-full')) {
                  that.parent().parent().addClass('jp-video-full-style')
                } else {
                  that.parent().parent().removeClass('jp-video-full-style')
                }
              })

            window.onresize = function () {
              if (that.parent().parent().hasClass('jp-video-full')) {
                that.parent().parent().addClass('jp-video-full-style')
              } else {
                that.parent().parent().removeClass('jp-video-full-style')
              }
            }
          }
        },
        play: function () {
          $(this).jPlayer('pauseOthers')
          $(this).parent().find('.jp-video-play').hide()
          $(this).on('click', function () {
            $(this).jPlayer('pause')
          })
        },
        pause: function () {
          $(this).parent().find('.jp-video-play').show()
        },
        swfPath: '../../dist/jplayer',
        supplied: 'webmv, ogv, m4v',
        size: size,
        useStateClassSkin: true,
        cssSelectorAncestor: '#jp_container_' + dom.attr('data-id'),
        autoBlur: true,
        smoothPlayBar: true,
        keyEnabled: true,
        remainingDuration: false,
        toggleDuration: true
      })
    }
  },
}