javascript iOS设备上的全屏背景视频幻灯片 - 注意目前使用jquery :)
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了javascript iOS设备上的全屏背景视频幻灯片 - 注意目前使用jquery :)相关的知识,希望对你有一定的参考价值。
{% for video in site.static_files %}
{% if video.path contains 'img/videos' %}
<video muted playsinline>
<source src="{{ site.baseurl }}{{ video.path }}" type="video/mp4">
</video>
{% endif %}
{% endfor %}
window.__next_video = 0;
function playNextVideo() {
if (window.__next_video === $('video').length) {
window.__next_video = 0;
}
playVideoAtIndex(window.__next_video);
window.__next_video++;
}
function playVideoAtIndex(index) {
$('video').each(function(i, video) {
var $vid = $(video);
var vid = $vid[0];
$vid.off('ended');
$vid.fadeOut('fast');
if (index === i) {
vid.load();
vid.play();
$vid.fadeIn('fast');
$vid.on('ended', playNextVideo);
}
});
}
playNextVideo();
以上是关于javascript iOS设备上的全屏背景视频幻灯片 - 注意目前使用jquery :)的主要内容,如果未能解决你的问题,请参考以下文章
带封面图片的全屏背景 HTML5 视频
当设备仅从纵向旋转到横向时,网页上的全屏图像被挤压
不使用 Flash 的全屏视频背景
无 JS 的全屏 HTML5 视频背景
使用 HTML5 的全屏背景视频
想要为全屏视频背景上的音频创建自定义静音/取消静音按钮