请我需要你的帮助伙计们!
我正在使用 Anythingslider 在 HTML5 视频和其他内容之间滑动,但是当我在视频标签中添加自动播放属性时,Anythingslider 只播放音频。
请我需要你的帮助伙计们!
我正在使用 Anythingslider 在 HTML5 视频和其他内容之间滑动,但是当我在视频标签中添加自动播放属性时,Anythingslider 只播放音频。
您确定视频没有隐藏在另一个元素后面吗?使用 z-index 播放,因为视频应该可见。过去我遇到过一些问题,例如视频在滚动时忽明忽暗。
我最终在灯箱中播放视频,因为随着轮播继续滚动,任何滑块都会让视频播放。此外,如果您使用无限滚动条,在两个地方播放视频也会出现问题。
如果您使用的是 JW Player 之类的东西,您将能够设置一些操作来暂停幻灯片或类似视频上的视频,但基本的 youtube 嵌入将是一个问题。
不要将自动播放属性添加到 HTML5 视频。可能发生的情况是视频的克隆副本(仅限第一张和最后一张幻灯片)正在播放视频,但您听到的只是音频,因为面板不在视图中。您不想自动播放的原因是,即使 AnySlider 从另一张可见的幻灯片开始,它仍然会自动播放,并且在您循环浏览面板之前它不会停止。
如果您希望在面板可见时自动播放视频,您必须在完成的回调中添加一些脚本(下面的代码不需要视频扩展;演示):
var playvid = function(slider) {
var vid = slider.$currentPage.find('video');
if (vid.length) {
// autoplay
vid[0].play();
}
};
$('#slider').anythingSlider({
// Autoplay video in initial panel, if one exists
onInitialized: function(e, slider) {
playvid(slider);
},
// pause video when out of view
onSlideInit: function(e, slider) {
var vid = slider.$lastPage.find('video');
if (vid.length && typeof(vid[0].pause) !== 'undefined') {
vid[0].pause();
}
},
// play video
onSlideComplete: function(slider) {
playvid(slider);
},
// pause slideshow if video is playing
isVideoPlaying: function(slider) {
var vid = slider.$currentPage.find('video');
return (vid.length && typeof(vid[0].pause) !== 'undefined' && !vid[0].paused && !vid[0].ended);
}
});