个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
24
4
我使用 bxslider 在 slider 上显示图像和视频，我需要 slider 每 5 秒显示一次图像，但是当出现视频时，视频会自动播放直到结束。然后，放映下一张幻灯片。所有这些都必须在一个循环中。
我卡住了，这不能正常工作。这是我的问题:
1.- 如果我将 bxslider“auto=true”设置为从一个 slider 更改为另一个 slider ，它会在播放视频时执行。
2.- 如果我禁用“自动”属性，第一个视频会播放到最后，然后切换到下一个 slider ，但下一个视频不会播放。取而代之的是，第一个视频再次播放。
3.- 如果没有插件就更好了，因为解决这个问题后我需要添加一些 PHP 来动态化内容。
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<link href="css/videos.css" rel="stylesheet" />
<link href="css/jquery.bxslider.css" rel="stylesheet"/>
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.bxslider.min.js" type="text/javascript"></script>
<script src="js/jquery.fitvids.js" type="text/javascript"></script>
</head>
<body>
<ul class="bx" >
<li data-idx="0">
<video preload="" class="video-bg vid" id="vid0" >
<source src="video/01.mp4" type="video/mp4">
</video>
</li>
<li data-idx="1">
<img src="video/slider1.jpg">
</li>
<li data-idx="2">
<video preload="" class="video-bg vid" id="vid1" >
<source src="video/02.mp4" type="video/mp4">
</video>
</li>
</ul>
<script>
var vid0= document.getElementById("vid0");
vid0.onended = function(){
bx.goToNextSlide();
bx.redrawSlider();
vid0.load();
vid0.play();
vid1.pause();
}
var vid1= document.getElementById("vid1");
vid1.onended = function(){
bx.goToNextSlide();
bx.redrawSlider();
vid1.load();
vid1.play();
vid0.pause();
}
var bx = $('.bx').bxSlider({
video: true,
useCSS: false,
nextText: '',
prevText: '',
mode:'fade',
infiniteLoop:true,
auto:true,
onSliderLoad:function(currentIndex){
vid0.play();
},
});
</script>
</body>
</html>
之前的代码是我在网上找到的其他代码拼凑而成的。
非常感谢您的帮助，谢谢!!
赫克托耳
最佳答案
我终于找到了解决办法。如果其他人需要，我会把它放在这里。
我使用了一些 CSS 来改变视频和图像的不透明度。
这是 HTML 和 Javascript 代码:
<!DOCTYPE html>
<html lang="en">
<head>
<link href="css/videos.css" rel="stylesheet" />
</head>
<body>
<div class="container">
<video autoplay id="video1" class="video1">
<source src="video/01.mp4" type="video/mp4">
</video>
<video id="video2" class="video2">
<source src="video/02.mp4" type="video/mp4">
</video>
<video id="video3" class="video3">
<source src="video/03.mp4" type="video/mp4">
</video>
<img src="video/slider1.jpg" class="imagenes" id="imagen1">
</div>
<script>
var video1 = document.getElementById('video1');
var video2 = document.getElementById('video2');
var video3 = document.getElementById('video3');
var imagen1 = document.getElementById('imagen1');
function imgTransition(){
imagen1.style.opacity=0;
video1.play();
video1.style.opacity=1;
}
video1.onended = function(){
video2.play();
video1.style.opacity=0;
video2.style.opacity=1;
}
video2.onended = function(){
video3.play();
video2.style.opacity=0;
video3.style.opacity=1;
}
video3.onended = function(){
video3.style.opacity=0;
imagen1.style.opacity=1;
window.setTimeout(imgTransition, 5000);
}
</script>
</body>
</html>
这是 CSS:
*{
padding:0;
margin:0;
}
video{
width:100%;
height:100%;
position:absolute;
object-fit:cover;
transition: all 1.2s linear;
z-index: -10;
}
.video1{
opacity:1;
}
.video2{
opacity:0;
}
.video3{
opacity:0;
}
.imagenes{
opacity:0;
transition:opacity 2s;
width:100%;
height:100%;
position:absolute;
object-fit:cover;
z-index: -10;
}
.container {
width:100%;
height:100%;
}
所有这些代码都基于 youtube 上的视频:
https://www.youtube.com/watch?v=Bxy7xspJO14
谢谢!
赫克托耳
关于javascript - 图像和视频 slider 自动播放，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48696198/
24
4
0
我做了一个项目，使用两个不同的textview进行触摸来播放两个音频。 这是一个文本 View 的简单代码 tv.setOnTouchListener(new OnTouchListener() {
我正在使用 pygame 模块在 python 中操作声音文件。它在交互式 python session 中工作正常，但相同的代码在 bash 中不会产生任何结果: 交互式Python $ sudo
请注意它只能是 JavaScript。请参阅下面我当前的 HTML。我需要像当前代码一样在页面之间旋转。但是，我需要能够在页面之间暂停/播放。
我有一个带有一堆音频链接的html。我正在尝试使所有音频链接都在单击时播放/暂停，并且尝试了here解决方案。这正是我所追求的，只是我现在不得不修改此功能以应用于代码中的所有音频链接(因为我不能为每个
在尝试进入我的代码中的下一个文件之前，我尝试随机播放.wav文件数毫秒。最好的方法是什么？ 我目前有以下代码: #!/usr/bin/env python from random import ran
我有2个回调函数，一个播放音频，另一个停止音频。 function Play_Callback(hObject, eventdata, handles) global path; global pla
我有一个电台应用程序，并与carplay集成。在Carplay仪表板中，我仅看到专辑封面图像和停止按钮。我想在仪表板上显示播放/暂停和跳过按钮。如果您对该站有任何了解，可以帮我吗？ 最佳答案 您需要使
我正在使用 ffmpeg 创建一个非常基本的视频播放器。库，我有所有的解码和重新编码，但我坚持音频视频同步。 我的问题是，电影有音频和视频流混合(交织)，音频和视频以“突发”(多个音频包，然后是并列的
我不知道我在做什么错 $(document).ready(function() { var playing = false; var audioElement = document.
我正在尝试通过(input:file)Elem加载本地音频文件，当我将其作为对象传递给音频构造函数Audio()时，它不会加载/播放。 文件对象参数和方法: lastModified: 1586969
在 Qt 中创建播放/暂停按钮的最佳方法是什么？我应该创建一个操作并在单击时更改其图标，还是应该创建两个操作然后以某种方式在单击时隐藏一个操作？如何使用一个快捷键来激活这两个操作？ (播放时暂停，暂停
我正在用 Python 和 SQLite 构建一个预订系统。 我有一个 Staff.db 和 Play.db (一对多关系)。这个想法是这样的:剧院的唯一工作人员可以通过指定开始日期和时间来选择何时添
我有一个服务于 AAC+ (HE v2) 的 Icecast 服务器。我在我的网页中使用 JPlayer 来播放内容。在没有 Flash Player 的 Chromium 中，它工作得很好。 对于支
当我运行我的方法时，我收到一个MediaException。我使用 playSound("src/assets/timeup.mp3"); 调用该方法。 private void playSound(
我有一项正在播放播客的服务。我希望该服务检测用户何时按下暂停或从他们的 BT radio 播放，以便我可以停止和启动它。对于我的生活，我无法弄清楚要向我的监听器添加什么过滤器(当我按下 BT 按钮时，
我对 Java 不是很在行，在研究网站上的音乐循环的简单播放/暂停按钮后，我得到了这段代码。它可以很好地离线测试，但在上传到 FTP 服务器后，它不会在任何浏览器中播放音频，我得到 SyntaxErr
我有一个使用 flickity carousel library 创建的视频轮播, 见过 here on codepen .我想要发生的是，当用户滑动轮播时，所选幻灯片停止播放，然后占据所选中间位置的
这是一个 JSFiddle: http://jsfiddle.net/8LczkwLz/19/ HTML: JS: var flashcardAudio = documen
我的问题是我无法将歌曲标题文本保持在 line-height: 800px;当用户播放或暂停播放器时。我设法在 :hover 上做到了。这似乎是一件非常棘手的事情，这真的是我第一次遇到 CSS 如此困
我还没有找到与我的完全一样的帖子，所以这就是问题所在。我正在制作一个 mp3 播放器，播放/暂停是两个单独的按钮。这是我的代码。 prevButton = document.getElementByI
我是一名优秀的程序员,十分优秀！