助けてください!
Anythingsliderを使用してHTML5ビデオと他のコンテンツの間をスライドしていますが、ビデオタグに自動再生属性を追加すると、Anythingsliderはオーディオのみを再生します。
助けてください!
Anythingsliderを使用してHTML5ビデオと他のコンテンツの間をスライドしていますが、ビデオタグに自動再生属性を追加すると、Anythingsliderはオーディオのみを再生します。
ビデオが別の要素の後ろに隠れていませんか? ビデオが表示されるはずなので、z-index で遊んでください。過去に、スクロール時にビデオがちらついたり見えなくなったりするなど、これに関していくつかの問題がありました。
カルーセルがスクロールし続けると、スライダーがビデオを再生したままになるため、ライトボックスでビデオを再生することになりました。また、無限スクローラーを使用すると、ビデオが 2 か所で再生されるという問題もありました。
JW Player のようなものを使用している場合、スライドなどでビデオを一時停止するアクションを設定できますが、基本的な youtube の埋め込みが問題になります。
HTML5 ビデオに autoplay 属性を追加しないでください。おそらく、ビデオのクローン コピー (最初と最後のスライドのみ) がビデオを再生していますが、パネルが表示されていないため、オーディオしか聞こえません。自動再生したくない理由は、 AnythingSlider が別のスライドを表示して開始しても自動再生され、パネルを循環するまで停止しないためです。
パネルが表示されているときにビデオを自動再生する場合は、完了したコールバックにスクリプトを追加する必要があります (以下のコードではビデオ拡張機能は必要ありません; demo ):
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);
}
});