ローカルビデオをストリーミングするためにjwplayer とyoxviewプラグインを使用し、スライド効果を得るためにawshowcaseプラグインを使用しています。しかし、最初の div.thumbnails のビデオが適切に機能している間に、他の div.thumbnails にスライドしてビデオをクリックすると、「オブジェクトが見つかりません!」と表示されるという問題があります。ページ。私を助けてください...私は立ち往生しています
これが私のコードです：
<script type="text/javascript" src="yoxview/yoxview-init.js"></script>
<script type="text/javascript" src="scripts/jquery.aw-showcase.min.js"></script>
<script type="text/javascript" src="jwplayer/jwplayer.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#showcase").awShowcase(
{
content_width: 1024,
content_height: 470,
fit_to_parent: true,
auto: false,
interval: 3000,
continuous: false,
loading: true,
arrows: true,
buttons: false,
btn_numbers: false,
keybord_keys: true,
mousetrace: false, /* Trace x and y coordinates for the mouse */
pauseonover: true,
stoponclick: true,
transition: 'hslide', /* hslide/vslide/fade */
transition_speed: 500,
transition_delay: 300,
show_caption: 'onhover', /* onload/onhover/show */
thumbnails: false,
thumbnails_position: 'outside-last', /* outside-last/outside-first/inside-last/inside-first */
thumbnails_direction: 'horizontal', /* vertical/horizontal */
thumbnails_slidex: 0, /* 0 = auto / 1 = slide one thumbnail / 2 = slide two thumbnails / etc. */
dynamic_height: true, /* For dynamic height to work in webkit you need to set the width and height of images in the source. Usually works to only set the dimension of the first slide in the showcase. */
speed_change: false, /* Set to true to prevent users from swithing more then one slide at once. */
viewline: false /* If set to true content_width, thumbnails, transition and dynamic_height will be disabled. As for dynamic height you need to set the width and height of images in the source. */
});
$(".thumbnails").yoxview({
flashVideoPlayer: 'jwplayer',
flashVideoPlayerPath: 'jwplayer/player.swf',
renderInfoExternally: true
});
});
</script>
<div id="showcase" class="showcase">
<!-- Each child div in #showcase represents a slide -->
<div class="showcase-slide">
<!-- Put the slide content in a div with the class .showcase-content. -->
<div class="showcase-content">
<!-- If the slide contains multiple elements you should wrap them in a div with the class .showcase-content-wrapper. -->
<div class="showcase-content-wrapper">
<!-- For dynamic height to work in webkit you need to set the width and height of images in the source.
Usually works to only set the dimension of the first slide in the showcase. -->
<div class="thumbnails">
<a href="media/2.flv?image=media/thumbnails/2.jpg&width=640&height=480"><img src="jwplayer/media/thumbnails/2.jpg" alt="First" title="The first image" /></a>
<a href="media/3.flv?image=media/thumbnails/3.jpg&width=640&height=480"><img src="jwplayer/media/thumbnails/3.jpg" alt="First" title="The SECOND image" /></a>
<a href="media/4.flv?image=media/thumbnails/4.jpg&width=640&height=480"><img src="jwplayer/media/thumbnails/4.jpg" alt="First" title="The THIRD image" /></a>
<a href="media/5.flv?image=media/thumbnails/5.jpg&width=640&height=480"><img src="jwplayer/media/thumbnails/5.jpg" alt="First" title="The fourth image" /></a>
<a href="media/6.flv?image=media/thumbnails/6.jpg&width=640&height=480"><img src="jwplayer/media/thumbnails/6.jpg" alt="First" title="The FIFTH image" /></a>
<a href="media/1.flv?image=media/thumbnails/1.jpg&width=640&height=480"><img src="jwplayer/media/thumbnails/1.jpg" alt="First" title="The SIXTH image" /></a>
</div>
</div>
</div>
</div>
<!-- Each child div in #showcase represents a slide -->
<div class="showcase-slide">
<div class="showcase-content">
<div class="showcase-content-wrapper">
<div class="thumbnails">
<a href="media/1.flv?image=media/thumbnails/1.jpg&width=640&height=480"><img src="jwplayer/media/thumbnails/1.jpg" alt="First" title="The first image" /></a>
<a href="media/2.flv?image=media/thumbnails/2.jpg&width=640&height=480"><img src="jwplayer/media/thumbnails/2.jpg" alt="First" title="The SECOND image" /></a>
<a href="media/3.flv?image=media/thumbnails/3.jpg&width=640&height=480"><img src="jwplayer/media/thumbnails/3.jpg" alt="First" title="The THIRD image" /></a>
<a href="media/4.flv?image=media/thumbnails/4.jpg&width=640&height=480"><img src="jwplayer/media/thumbnails/4.jpg" alt="First" title="The fourth image" /></a>
<a href="media/5.flv?image=media/thumbnails/5.jpg&width=640&height=480"><img src="jwplayer/media/thumbnails/5.jpg" alt="First" title="The FIFTH image" /></a>
<a href="media/6.flv?image=media/thumbnails/6.jpg&width=640&height=480"><img src="jwplayer/media/thumbnails/6.jpg" alt="First" title="The SIXTH image" /></a>
</div>
</div>
</div>
</div>
<!-- Each child div in #showcase represents a slide -->
<div class="showcase-slide">
<div class="showcase-content">
<div class="showcase-content-wrapper">
<div class="thumbnails">
<a href="media/1.flv?image=/media/thumbnails/1.jpg&width=640&height=480"><img src="jwplayer/media/thumbnails/1.jpg" alt="First" title="The first image" /></a>
<a href="media/2.flv?image=/media/thumbnails/2.jpg&width=640&height=480"><img src="jwplayer/media/thumbnails/2.jpg" alt="First" title="The SECOND image" /></a>
<a href="media/3.flv?image=/media/thumbnails/3.jpg&width=640&height=480"><img src="jwplayer/media/thumbnails/3.jpg" alt="First" title="The THIRD image" /></a>
<a href="media/4.flv?image=media/thumbnails/4.jpg&width=640&height=480"><img src="jwplayer/media/thumbnails/4.jpg" alt="First" title="The fourth image" /></a>
<a href="media/5.flv?image=media/thumbnails/5.jpg&width=640&height=480"><img src="jwplayer/media/thumbnails/5.jpg" alt="First" title="The FIFTH image" /></a>
<a href="media/6.flv?image=media/thumbnails/6.jpg&width=640&height=480"><img src="jwplayer/media/thumbnails/6.jpg" alt="First" title="The SIXTH image" /></a>
</div>
</div>
</div>
</div>
<!-- Each child div in #showcase represents a slide -->
<div class="showcase-slide">
<div class="showcase-content">
<div class="showcase-content-wrapper">
<div class="thumbnails">
<a href="media/1.flv?image=/media/thumbnails/1.jpg&width=640&height=480"><img src="jwplayer/media/thumbnails/1.jpg" alt="First" title="The first image" /></a>
<a href="media/2.flv?image=/media/thumbnails/2.jpg&width=640&height=480"><img src="jwplayer/media/thumbnails/2.jpg" alt="First" title="The SECOND image" /></a>
<a href="media/3.flv?image=/media/thumbnails/3.jpg&width=640&height=480"><img src="jwplayer/media/thumbnails/3.jpg" alt="First" title="The THIRD image" /></a>
<a href="media/4.flv?image=media/thumbnails/4.jpg&width=640&height=480"><img src="jwplayer/media/thumbnails/4.jpg" alt="First" title="The fourth image" /></a>
<a href="media/5.flv?image=media/thumbnails/5.jpg&width=640&height=480"><img src="jwplayer/media/thumbnails/5.jpg" alt="First" title="The FIFTH image" /></a>
<a href="media/6.flv?image=media/thumbnails/6.jpg&width=640&height=480"><img src="jwplayer/media/thumbnails/6.jpg" alt="First" title="The SIXTH image" /></a>
</div>
</div>
</div>
</div>
<!-- Each child div in #showcase represents a slide -->
<div class="showcase-slide">
<div class="showcase-content">
<div class="showcase-content-wrapper">
<div class="thumbnails">
<a href="media/1.flv?image=/media/thumbnails/1.jpg&width=640&height=480"><img src="jwplayer/media/thumbnails/1.jpg" alt="First" title="The first image" /></a>
<a href="media/2.flv?image=/media/thumbnails/2.jpg&width=640&height=480"><img src="jwplayer/media/thumbnails/2.jpg" alt="First" title="The SECOND image" /></a>
<a href="media/3.flv?image=/media/thumbnails/3.jpg&width=640&height=480"><img src="jwplayer/media/thumbnails/3.jpg" alt="First" title="The THIRD image" /></a>
<a href="media/4.flv?image=media/thumbnails/4.jpg&width=640&height=480"><img src="jwplayer/media/thumbnails/4.jpg" alt="First" title="The fourth image" /></a>
<a href="media/5.flv?image=media/thumbnails/5.jpg&width=640&height=480"><img src="jwplayer/media/thumbnails/5.jpg" alt="First" title="The FIFTH image" /></a>
<a href="media/6.flv?image=media/thumbnails/6.jpg&width=640&height=480"><img src="jwplayer/media/thumbnails/6.jpg" alt="First" title="The SIXTH image" /></a>
</div>
</div>
</div>
</div>
</div>