我最近在公司网站ena electronics上安装了Jssor滑块,我试图在网站上添加自动播放视频。
使用下面的代码,我可以在网页上播放它但是当它放入div中的滑块时它不起作用......我错过了什么?
感谢
<video width="320" height="240" controls autoplay>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
答案 0 :(得分:1)
对于任何想知道的人,我设法得到它:
<!-- #region Jssor Slider Begin -->
<!-- Generator: Jssor Slider Maker -->
<!-- Source: http://www.jssor.com -->
<!-- This code works without jquery library. -->
<script src="/src/slider/jssor.slider-22.1.8.min.js" type="text/javascript"></script>
<script>
jssor_1_slider_init = function () {
var options = {
$AutoPlay: 1,
$Idle: 2000,
$SlideDuration: 800,
$SlideEasing: $Jease$.$OutQuint,
$ArrowNavigatorOptions: {
$Class: $JssorArrowNavigator$
},
$BulletNavigatorOptions: {
$Class: $JssorBulletNavigator$
}
};
var jssor_1_slider = new $JssorSlider$('jssor_1', options);
function SliderParkEventHandler(slideIndex, fromIndex)
{
if(slideIndex == 0)
{
var video = document.getElementById("myvideo");
var button = document.getElementById("play");
if (video.paused) {
video.play();
button.textContent = "||";
}
}
}
jssor_1_slider.$On($JssorSlider$.$EVT_PARK,SliderParkEventHandler);
/*responsive code begin*/
/*you can remove responsive code if you don't want the slider scales while window resizing*/
function ScaleSlider() {
var refSize = jssor_1_slider.$Elmt.parentNode.clientWidth;
if (refSize) {
refSize = Math.min(refSize, 1920);
jssor_1_slider.$ScaleWidth(refSize);
}
else {
window.setTimeout(ScaleSlider, 30);
}
}
ScaleSlider();
$Jssor$.$AddEvent(window, "load", ScaleSlider);
$Jssor$.$AddEvent(window, "resize", ScaleSlider);
$Jssor$.$AddEvent(window, "orientationchange", ScaleSlider);
/*responsive code end*/
};
</script>
<link rel="stylesheet" href="/src/slider/slider.css" type="text/css"/>
<div id="jssor_1" style="position: relative; top: 0px; left: 0px; width: 1428px;
height: 305px;">
<!-- Loading Screen -->
<div data-u="loading" style="position: absolute; top: 0px; left: 0px;">
<div style="filter: alpha(opacity=70); opacity: 0.7; position: absolute; display: block; top: 0px; left: 0px; width: 100%; height: 100%;"></div>
<div style="position:absolute;display:block;background:url('/img/loading.gif') no-repeat center center;top:0px;left:0px;width:100%;height:100%;"></div>
</div>
<!-- Slides Container -->
<div u="slides" style="position: absolute; left: 0px; top: 0px; width: 1428px; height: 305px; overflow: hidden;">
<div data-idle="15000">
<div>
<!-- assuming that you placed video in the second slide -->
<video id="myvideo" width="1428" height="305" autoplay>
<source src="../src/video/products.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
<div>
<img data-u="image" src="/img/home/logo.png" alt="Logo"/>
</div>
</div>
<!-- Bullet Navigator -->
<div data-u="navigator" class="jssorb05" style="bottom:16px;right:16px;" data-autocenter="1">
<!-- bullet navigator item prototype -->
<div data-u="prototype" style="width:16px;height:16px;"></div>
</div>
<!-- Arrow Navigator -->
<span data-u="arrowleft" class="jssora22l" style="top:0px;left:8px;width:40px;height:58px;" data-autocenter="2"></span>
<span data-u="arrowright" class="jssora22r" style="top:0px;right:8px;width:40px;height:58px;" data-autocenter="2"></span>
</div>
<!-- Trigger -->
<script>
jssor_1_slider_init();
</script>
<!-- Jssor Slider End -->
答案 1 :(得分:0)
目前,jssor滑块无法控制视频。当滑块停放在视频所在的特定幻灯片上时,您可以编写手动代码来播放视频。
<!-- Jssor Slider Begin -->
<script type="text/javascript" src="../js/jssor.slider.min.js"></script>
<script>
jssor_slider1_init = function () {
var options = {
$AutoPlay: 1
};
var jssor_slider1 = new $JssorSlider$('slider1_container', options);
function SliderParkEventHandler(slideIndex, fromIndex)
{
if(slideIndex == 1)
{
//do something to play video when the slider parks at the second slide
}
}
jssor_slider1.$On($JssorSlider$.$EVT_PARK,SliderParkEventHandler);
};
</script>
<div id="slider1_container" style="position: relative; top: 0px; left: 0px; width: 600px;
height: 300px;">
<!-- Slides Container -->
<div u="slides" style="position: absolute; left: 0px; top: 0px; width: 600px; height: 300px; overflow: hidden;">
<div></div>
<div>
<!-- assuming that you placed video in the second slide -->
<video id="myvideo" width="320" height="240" controls autoplay>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
</div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<!-- Trigger -->
<script>
jssor_slider1_init();
</script>
</div>
<!-- Jssor Slider End -->