滑块上的视频重播

时间:2013-08-22 16:38:21

标签: video.js anythingslider

video.js您好。滑块启动时我正试图进行视频自动播放。那部分是有效的。问题发生在它循环播放并返回视频时,视频将无法重播。我试图用loop =“true”来解决它,但如果我这样做它只是反复播放视频然后滑块不起作用。有什么建议?谢谢! (如果需要,我可以添加我的代码)

<meta charset="utf-8">

<title>AnythingSlider Video Demo</title>
<link rel="shortcut icon" href="demos/images/favicon.ico" type="image/x-icon">
<link rel="apple-touch-icon" href="demos/images/apple-touch-icon.png">

<!-- jQuery (required) -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/jquery.min.js"><\/script>')</script>

<!-- Demo stuff -->

<link rel="stylesheet" href="demos/css/page.css">

<!-- Anything Slider optional plugins, but needed so the embeded video controls will work in IE -->
<!-- http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js -->
<script src="js/swfobject.js"></script>

<!-- Anything Slider -->
<link href="video-js.css" rel="stylesheet" type="text/css">

<link rel="stylesheet" href="css/anythingslider.css">
<script src="js/jquery.anythingslider.js"></script>

<!-- AnythingSlider video extension; optional, but needed to control video pause/play -->
<script src="js/jquery.anythingslider.video.js"></script>

<script>
// DOM Ready
$(function(){
$('#slider')
.anythingSlider({
resizeContents      : true,
autoPlay            : true,
addWmodeToObject    : 'opaque',
buildStartStop: false,  
navigationFormatter : function(index, panel){ //  Format navigation labels with text
return [][index - 1];

}
})


// Initialize video extension

// see https://developers.google.com/youtube   /player_parameters?hl=en#Parameters for a list of parameters

.anythingSliderVideo({
startPanel          : 1,
// video id prefix; suffix from    
$.fn.anythingSliderVideo.videoIndex
videoId : 'asvideo',
// auto load YouTube api script
youtubeAutoLoad : false,
wmode: 'transparent&autoplay=1', // (hack) add autoplay code here
// see: https://developers.google.com/youtube    /player_parameters#Parameters
youtubeParams: {
modestbranding : 1,
iv_load_policy : 3,    
fs : 1  
}
});
});
</script>
<script src="video.js"></script>

<!-- Unless using the CDN hosted version, update the URL to the Flash SWF -->

<script>
videojs.options.flash.swf = "video-js.swf";
</script>
</head>

<body>

<!-- START AnythingSlider -->
<ul id="slider">    

<!-- HTML5 Video -->
<li class="panel5">
<video id="example_video_1" class="video-js vjs-default-skin" controls autoplay preload="auto" autoplay="true" width="640" height="264"
poster="http://video-js.zencoder.com/oceans-clip.png"
data-setup="{}">
<source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4' />
<source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm' />
<source src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg' />
<track kind="captions" src="demo.captions.vtt" srclang="en" label="English">    
</track><!-- Tracks need an ending tag thanks to IE9 -->
</video>
</li>
 <li><img src="demos/images/slide-civil-1.jpg" alt=""></li>

<li><img src="demos/images/slide-env-1.jpg" alt=""></li>

<li><img src="demos/images/slide-civil-2.jpg" alt=""></li>

<li><img src="demos/images/slide-env-2.jpg" alt=""></li>

</ul> <!-- END AnythingSlider -->

<br>

</div>

<br>

1 个答案:

答案 0 :(得分:1)

您可以将<video>标记的autoplay参数添加到“autoplay”而不是true。这适用于我使用Anything Slider。