javascript - 移动 safari 上的火功能“完成”按钮单击 + 移动 Wistia 视频

Question

我正在使用 Wista 在我的网站中嵌入视频。这适用于所有常规浏览器，但在移动 Safari 中单击播放按钮会打开我猜的 html5 视频播放器。因此，我的 exitVideo 功能永远不会被激活，因为播放器有自己的完成按钮。有谁知道如何捕捉这个点击事件？我真正需要的是fullScreenVideo.playingVideo当用户关闭视频时变为假的功能。

html

<div id="movie-section">
    <div id="video_container">
      <div class="fade-video"></div>
      <div id="video-tag">
        <div class="video-text">
          <h3>We would love to tell you about us.</h3>
          <h2>Checkout our intro <span class="blue">video<span></h2>
        </div>
        <img id="play-btn" src="i/graphic_play-button.svg">
      </div>

      <div id="wistia_8hq5abfi3l" class="wistia_embed backgroundVideo" style="width:920px;height:518px;"></div>
    </div>
    <div id="wistia_7j06z458qu" class="wistia_embed overlayVideo" style="width:920px;height:518px;"></div>
    <div id="ex"><img src="i/ex.svg" width="23" height="23" /></div>
  </div>

Javascript

var fullScreenVideo = fullScreenVideo || {};

fullScreenVideo = {
    name: 'fullScreenVideo',

    backgroundvideo: '8hq5abfi3l',
    backgroundVideoDiv: document.getElementById("wistia_8hq5abfi3l"),
    overlayVideo: '7j06z458qu',
    overlayVideoDiv: document.getElementById("wistia_7j06z458qu"),
    textDiv: document.getElementById("play-btn"),
    movieBackground: document.getElementById("movie-background"),
    movieSection: document.getElementById('movie-section'),
    videoContainer: document.getElementById("video_container"),
    ex: document.getElementById('ex'),
    playingVideo: false,
    width: null,
    height: null,

    embedVideo: function()
    {
      var videoOptions = {};

      Wistia.obj.merge(videoOptions, {
        plugin: {
          cropFill: {
            src: "//fast.wistia.com/labs/crop-fill/plugin.js"
          }
        }
      });

      wistiaEmbed = Wistia.embed(fullScreenVideo.backgroundvideo, videoOptions);
      overlayEmbed = Wistia.embed(fullScreenVideo.overlayVideo, videoOptions);

      /**
       * We load the thumbnail in the background while we wait
       * for the video to load and play. Once loaded, we pause, reset to 
       * frame zero, show the video then play it.
       */
      wistiaEmbed.bind("play", function(){
        wistiaEmbed.pause();
        wistiaEmbed.time(0);
        fullScreenVideo.backgroundVideoDiv.style.visibility='visible';
        wistiaEmbed.play();
        return this.unbind;
      });

    },

    playVideo: function()
    {

      fullScreenVideo.playingVideo = true;

      if(window.innerWidth < 650 && Modernizr.orientation){
        overlayEmbed.play();
      } else {
        fullScreenVideo.movieBackground.setAttribute('style', 'visibility: visible;');
        fullScreenVideo.movieSection.setAttribute('style', 'width: '+fullScreenVideo.width+'px; height: '+fullScreenVideo.height+'px;');
        fullScreenVideo.overlayVideoDiv.setAttribute('style', 'left: 0px; visibility: visible;');
        fullScreenVideo.ex.setAttribute('style', 'right: 24px');
        fullScreenVideo.textDiv.style.opacity='0';
        overlayEmbed.plugin.cropFill.resize();
        overlayEmbed.play();
        fullScreenVideo.disableScroll();
      }

      overlayEmbed.bind("end", function () {
        fullScreenVideo.exitVideo();   
      });

    },

    exitVideo: function()
    {
      fullScreenVideo.playingVideo = false;
        fullScreenVideo.movieBackground.setAttribute('style', 'visibility: hidden;');
        fullScreenVideo.movieSection.setAttribute('style', 'width: '+fullScreenVideo.width+'px; height: 320px;');
        fullScreenVideo.overlayVideoDiv.setAttribute('style', 'left: -3000px; visibility: hidden;');
        fullScreenVideo.ex.setAttribute('style', 'right: -3000px');
        fullScreenVideo.textDiv.style.opacity='1';
        overlayEmbed.pause();

        overlayEmbed._keyBindingsActive = false;
        overlayEmbed.time(0);
        fullScreenVideo.enableScroll();
        fullScreenVideo.fixTextPosition();
    },

    fixTextPosition: function()
    {
      var width = document.documentElement.clientWidth;
      var height = window.innerHeight;

      if(fullScreenVideo.playingVideo === true ){ //&& window.innerWidth > 650) {
        overlayEmbed.plugin.cropFill.resize();
        fullScreenVideo.videoContainer.setAttribute('style', 'width: '+width+'px; height: '+height+'px;');
        fullScreenVideo.movieSection.setAttribute('style', 'width: '+width+'px; height: '+height+'px;');
      } else{
        fullScreenVideo.movieSection.setAttribute('style', 'width: '+width+'px;');
        fullScreenVideo.videoContainer.setAttribute('style', 'width: '+width+'px;');
      };


      fullScreenVideo.overlayVideoDiv.style.width=width+'px';
      fullScreenVideo.overlayVideoDiv.style.height=height+'px';

      fullScreenVideo.width = width;
      fullScreenVideo.height = height;

    },

    disableScroll: function() {
      document.body.style.overflow='hidden';
    },

    enableScroll: function() {
      document.body.style.overflow='auto';
    }
}

 xui.ready(function() { 
  fullScreenVideo.fixTextPosition();
  fullScreenVideo.embedVideo();
 });

window.addEventListener('resize', fullScreenVideo.fixTextPosition);
x$("#play-btn").on('click', fullScreenVideo.playVideo);
x$("#ex").on('click', fullScreenVideo.exitVideo);