我有一个视频,它最初隐藏在页面加载时的div中。然后,当我点击一个图像时,它会打开并自动播放。
但是,当浏览器上未启用闪光灯时,视频将在不打开的情况下播放。所以我只能听到音频,但没有视频。
这是我正在使用的Youtube Api代码:
<div id="video-home-popup" style="display:none; padding:0px;">
<div id="player"></div>
<script type="text/javascript">
var tag = document.createElement('script');
tag.src = "http://www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;
function onYouTubePlayerAPIReady() {
player = new YT.Player('player', {
playerVars: {
modestbranding: true,
theme: 'light',
rel: 0,
wmode: "opaque",
autoplay: '1'
},
height: '480',
width: '640',
videoId: 'qLFQUdmAkcQ',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
function onPlayerReady(event) {
/// event.target.playVideo();
}
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.PLAYING) {
_gaq.push(['_trackEvent', 'Videos', 'Play',
player.getVideoUrl()]);
}
if (event.data == YT.PlayerState.PAUSED) {
_gaq.push(['_trackEvent', 'Videos', 'Paused',
player.getVideoUrl()]);
}
if (event.data == YT.PlayerState.ENDED) {
_gaq.push(['_trackEvent', 'Videos', 'Watch to End',
player.getVideoUrl()]);
}
}
// ]]>
</script>
</div>
Fancybox代码:
var vid=jQuery;
vid.noConflict();
vid(document).ready(function() {
vid('.fancyboxvideo').fancybox({
padding : 0,
openEffect : 'none',
closeEffect : 'none',
prevEffect : 'none',
nextEffect : 'none',
autoSize : false,
fitToView : false,
width : '640px',
height : '480px',
arrows : false,
wmode : 'opaque',
helpers : {
media : {},
buttons : {},
overlay : {
css : {
'background' : 'rgba(0,0,0,0.9)'
}
}
}
});
});
打开视频链接:
<a class="fancyboxvideo" href="#video-home-popup"></a>
autoplay
选项应该为零,只需在onComplete
Fancybox回调中调用player.playVideo()
即可。