1

我正在使用管状插件 ( http://www.seanmccambridge.com/tubular/ ) 创建一个微妙的 html 视频背景。这在 Chrome 中有效，但在 Mac 上的 Safari 7 中，视频无法启动。

我已将其缩小到 z-index，这是 safari 不会自动启动视频的原因。当我将tubularContainer 的z-index（默认为1）更改为高于我的其他内容（例如9999）的值时，视频开始就好了。

var tubularContainer = '<div id="tubular-container" style="overflow: hidden; position: fixed; z-index: 1; width: 100%; height: 100%"><div id="tubular-player" style="position: absolute"></div></div><div id="tubular-shield" style="width: 100%; height: 100%; z-index: 1; position: absolute; left: 0; top: 0;"></div>';

有谁知道如何规避这种狩猎行为？就好像视频在其上方有带有 z-index 的内容时不会开始。

4

2 回答 2

2

我一直在为一个需要全屏 YouTube 视频的项目破解 jQuery Tubular，但最终比我最初想象的要走得更远。我也遇到了这个问题，由于已经更改了 Tubular 以提供回调和其他功能，因此不能简单地更换插件。

这就是我修复 Safari 的方式：

window.onYouTubeIframeAPIReady = function() {
    player = new YT.Player('tubular-player', {
        width: options.width,
        height: Math.ceil(options.width / options.ratio),
        videoId: options.videoId,
        playerVars: {
            controls: 0,
            showinfo: 0,
            modestbranding: 1,
            wmode: 'transparent',
            rel: 0,
            autoplay: 1,
            html5: 1
        },
        events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
        }
    });
}

（这是直接在 jquery.tubular.js 中更改的代码）

主要需要注意的是html5: 1，它鼓励使用 HTML5 播放器。我不知道为什么 Safari 默认使用 Flash，但它确实是，这对我来说是个问题。显然，有一些“省电”模式会影响 Flash 等插件。

于 2014-08-15T21:41:07.947 回答
0

该插件似乎与 Safari 的省电功能不兼容。Safari 甚至不会在自己的主页上播放视频..

我改用Jquery -MB-YTPlayer

于 2014-03-19T15:02:48.753 回答