VideoJS 4.0 在 iPad 上表现异常答案

【问题标题】：VideoJS 4.0 Acts strangely on iPadVideoJS 4.0 在 iPad 上表现异常
【发布时间】：2013-05-13 21:11:00
【问题描述】：

我刚刚将我的应用升级到新的 videojs 4.0 版，但它现在不适用于 iPad（据我所知，它适用于所有其他浏览器）。

4.0 皮肤没有出现，API 似乎根本不起作用。视频被用作背景，并由应用程序中的按钮控制。但是，升级后，视频会导致所有按钮无法点击（或者如果您愿意，也无法触摸）。

这是我正在使用的 JS。

var $curTime = 0;
var $setPause = "Go";
var $timeOutTime = 1000;

$( '#main' ).on( 'pageshow',function(event){
videojs("HumanBody", {"preload":"metadata","poster":"http://pidcgr.com/lobby/humanbody/vid/poster.png","controls":true}, function(){
    console.log("Initialized");
});

var myPlayer = videojs("HumanBody");
myPlayer.ready(function(){
    myPlayer.src([
      { type: "video/mp4", src: "http://pidcgr.com/lobby/humanbody/vid/bodyapp.mp4" },
      { type: "video/ogg", src: "http://pidcgr.com/lobby/humanbody/vid/bodyapp.ogv" }
    ]);
    setTimeout(function() {
        if($setPause=="Paused") {
            myPlayer.pause();
        }
        else {
            myPlayer.play();
        }
        myPlayer.on('loadedmetadata', function() {
            myPlayer.currentTime($curTime.toFixed(1));
        });
    }, $timeOutTime);
    $(".video-nav").click(function() {
        myPlayer.pause();
        $curTime = myPlayer.currentTime();
        $setPause = "Paused";
    });
    $("a.start-over").click(function() {
        myPlayer.pause();
        $curTime = 0;
        $setPause = "Go";
    });
    myPlayer.on('pause', function() {
        myPlayer.posterImage.show();
    });
    myPlayer.on('ended', function() {
        myPlayer.currentTime(myPlayer.duration()-1+0.99);
        myPlayer.pause();
        myPlayer.posterImage.hide();
    });
    myPlayer.on('error', function() {
        console.log("Error");
    });
    $timeOutTime = 500;
});
});

视频标签如下所示：

<video id="HumanBody" class="video-js vjs-default-skin" width="1024" height="748"></video>

在此处预览网址：http://pidcgr.com/lobby/humanbody/

【问题讨论】：

标签： ios ipad video.js

【解决方案1】：

您似乎可以设置一个新的（尚未记录？）选项，该选项将禁用 iPad 和 Android 设备上的默认控件并显示 videojs 皮肤： customControlsOnMobile

所以设置videojs：

$( '#main' ).on( 'pageshow',function(event){
videojs("HumanBody", {"preload":"metadata","poster":"http://pidcgr.com/lobby/humanbody/vid/poster.png","controls":true, "customControlsOnMobile": true}, function(){
});

你好，菲利普

【讨论】：

菲利普帮了大忙。让我的自动播放或恢复播放功能工作仍然是一个技巧，但至少这是可用的！谢谢！

【解决方案2】：

该选项在最新版本中已更改为“nativeControlsForTouch”。对于试图在源代码中找到 customControlsOnMobile 的人。

【讨论】：