javascript - 在 IOS 设备上暂停 (html5) youtube 视频

Question

我试图在加载了 youtube.com 的 IOS UIview 中使用 MY OWN 按钮暂停视频。我一直在尝试与 youtube api 进行交互，但运气不佳。

我正在考虑注入(inject)我自己的代码来与播放器交互(swfobject 对象？是吗？)。我试图连接到播放器/swfobject 但没有成功。 再次澄清一下，我不想将自己的视频嵌入到新的 WebView 中。(我知道该怎么做。一个很酷的方法是使用 Tubeplayer plugin)。

所以我想做的是:

1. 注入(inject)暂停 JavaScript 函数，我将从我的移动应用。

2. 然后该函数将执行如下操作:

   var theSwfobject = window.swfobject; //**Find the youtube video object for reuse.**
   theSwfobject.PauseVideo();
   

所以简短的问题是:如何在 youtube.com 上找到并重用 youtube 视频对象(这样我就可以注入(inject)一个 pause() 函数来从 IOS 调用以暂停视频) ？

Answer 1

根据您的最新评论，我希望在 JavaScript 中做一些事情。这是我要设置的一个小 API，用于控制此实例中的视频元素。由于视频元素似乎没有 id，所以使用了 getElementsByTagName:

var myVideoController = {};

myVideoController = (function() {

  "use strict";      

  var muted = false;

  var module = {

    //Grabs video element by tag name and assumes there would only be one if it exists 
    getVideoElement : function() {
      var videoElements = document.getElementsByTagName('video');
      var videoElement = null;

      if(videoElements[0]) {
        videoElement = videoElements[0];
      }

      return videoElement;
    },

    /** 
     * Wrapper to make interacting with html5 video element functions easier.
     * @param functionName - name of function to invoke on the video element
     * @params - any additional parameters will be fed as arguments to the functionName function
     */
    callVideoFunction : function(functionName) {
      var videoElement = module.getVideoElement();
      var functionArguments = [];

      if(videoElement !== null) {
        functionArguments = module.getSubArguments(arguments, 1);

        if(functionArguments.length > 0) {
          videoElement[functionName](functionArguments);
        } else {
          videoElement[functionName]();
        }
      }
    },

    setVideoProperty : function(propertyName, propertyValue) {
      var videoElement = module.getVideoElement();

      if(videoElement !== null) {
        videoElement[propertyName] = propertyValue;
      }
    },

    /* Helper method to grab array of function arguments for callVideoFunction
       since the arguments object in functions looks like an array but isn't
       so .shift() is not defined */
    getSubArguments : function (args, indexFrom) {

      var subArguments = [];

      for(var i = indexFrom; i < args.length; i++) {
        subArguments.push(args[i]);
      }

      return subArguments;
    },

    //Pause the video
    pauseVideo : function() {
      module.callVideoFunction('pause');
    },

    //Play the video
    playVideo : function() {
      module.callVideoFunction('play');
    },

    //Mute/Unmute video
    flipVideoMute : function() {
      muted = !muted;
      module.setVideoProperty('muted', muted);
    }
  };

  return module;

})();

我在 http://www.w3.org/2010/05/video/mediaevents.html 测试了它其中 w3 设置了一个 HTML5 视频，其中包含有关 api 使用情况的反馈。我将上面的代码复制到 javascript 控制台并运行如下命令:

//Start video
myVideoController.playVideo();

//Pause video
myVideoController.pauseVideo();

//Restart video
myVideoController.playVideo();

//Mute video
myVideoController.flipVideoMute();

//Unmute video
myVideoController.flipVideoMute();