javascript - 动态更改 HTML 5 自动播放的视频源
问题描述
在我的网站https://cravydev.netlify.com上,当不同的标题出现在视口中时,我正在尝试动态更改视频。
我正在使用具有 HTML 5 自动播放和循环属性的 div,但是当特定标题出现在屏幕上时,我还无法更改视频源并再次加载。以下是详细信息。
HTML
<div class="iphone-sticky"></div>
<div class="iphone-video">
<video autoplay loop muted poster="assets/img/poster.png" id="iphonevideo">
<source id="video1" src="assets/img/iphone-video.mp4" type="video/mp4">
<source id="video2" src="assets/img/iphone-video-1.mp4" type="video/mp4">
</video>
JS
//Detect is element is in viewport
$(window).on('resize scroll', function() {
var player = document.getElementById('iphonevideo2');
if ($('#headline2').isInViewport()) {
var source = document.getElementById('video1');
$(source).attr("src", "assets/img/iphone-video-1.mp4");
player.pause();
player.load();
} else if ($('#headline3').isInViewport()) {
var source = document.getElementById('video1');
$(source).attr("src", "assets/img/iphone-video.mp4");
player.pause();
player.load();
}
});
编辑
感谢 Kley 的评论,我已经能够解决它。现在的问题是 js 逻辑不会不断检查标题的视口可见性,只检查一次。此外,视频在滚动播放的同时出现海报图像,让整个体验有点奇怪。
有什么建议可以解决吗?
谢谢!
解决方案
检查页面,不是视口()
我可以告诉您,每次滚动可见时,您都会更改 src,这会导致视频重新启动。您必须进行验证,如果已更改,则不应再次更改 src。
请注意,当#headline3 有点向上时,#headline2 不可见。
您必须向下滚动到页面末尾才能进入此条件。
您可以在每个 #headline 的开头使用另一个较小的元素来执行此验证。
你可以使用#headline的第一个p
例如:
$(window).on('resize scroll', function() {
var player = document.getElementById('iphonevideo2');
if ($('#headline2 p').eq(0).isInViewport()) {
var source = document.getElementById('video1');
var url = "assets/img/iphone-video-1.mp4";
var src = $(source).attr("src");
// validate if you already have the src
if(src==url) return; // if exists src leaves function
$(source).attr("src", url);
player.pause();
player.load();
} else if ($('#headline3 p').eq(0).isInViewport()) {
var source = document.getElementById('video1');
var src = $(source).attr("src");
var url = "assets/img/iphone-video.mp4";
// validate if you already have the src
if(src==url) return; // if exists src leaves function
$(source).attr("src", url);
player.pause();
player.load();
}
})
推荐阅读
- angular - 禁用按钮,直到填写所有输入字段和复选框,除了一个字段
- python - 检查是否在其他熊猫数据框中找到了两列值
- python - 无法使用 pip install psycopg2 安装 psycopg2
- windows - 检测Windows下键盘布局是否有AltGr
- jquery - 如何限制 AutoNumeric 负值的输入?
- python - 需要正则表达式来避免“\n”字符
- php - 如何为 5 个不同的 WordPress 帖子组设置样式
- python - 以下类没有基本事实示例
- c++ - 基于航拍图像的地面机器人障碍物检测
- computational-geometry - 列举所有基本可行的解决方案