javascript - モバイルサファリの発射機能「完了」ボタンクリック＋モバイルウィスティア動画

Question

Wista を使用して、自分の Web サイトに動画を埋め込んでいます。これはすべての通常のブラウザーで機能しますが、モバイル サファリで再生ボタンをクリックすると、html5 ビデオ プレーヤーと思われるものが開きます。このため、プレーヤーには独自の完了ボタンがあるため、私の exitVideo 関数はアクティブになりません。このクリックイベントをキャプチャする方法を知っている人はいますか? fullScreenVideo.playingVideo本当に必要なのは、ユーザーがビデオを閉じたときに false になる関数だけです。

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