我试图在 magento 的产品列表中使用 video.js 来显示产品的预告片。我可以让它与列表中的第一个视频一起工作,但其他视频开始在弹出窗口中播放,但我无法关闭它们,我可以关闭第一个但不能关闭其他视频。
我使用的 video.js 是 video.min.js - HTML5 Video Player Version 3.1.0
这是我调用视频功能的代码
<?php foreach ($_productCollection as $_product): ?>
<li class="item">
<div class="item-list" >
<?php // Product Image ?>
<div class="product-shop">
<?php $format = Icommerce_Default::getOptionValue( $_product, 'produkt_variant' );?>
<div class="format-list">
<?php if($format): ?>
<?php $path = "/media/format-list/".Icommerce_Default::urlify($format).".png"; ?>
<?php if( Icommerce_Default::siteFileExists($path) ): ?>
<img src="<?php echo Mage::getBaseURL() . $path; ?>" alt="<?php echo $format; ?>" width="35" height="15" />
<?php endif; ?>
<?php endif; ?>
</div>
<div class="list-titel" style="display:inline;"><a class="imgTip" href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->htmlEscape($_product->getName()) ?>"><?php echo $this->htmlEscape($_product->getName())?><span><div class="prev-img"><img class="tTip" src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->resize(110, 153); ?>" width="110" height="153" alt="<?php echo $this->htmlEscape($this->getImageLabel($_product, 'small_image')) ?>" title="<?php echo $this->htmlEscape($this->getImageLabel($_product, 'small_image')) ?>" /></div></span></a></div>
<?php $release = $_product->getFilmReleasedatum() ?>
<div class="releasedatum-list" style="display:inline;"><?php echo date("Y-m-d" , strtotime($release));?></div>
<div class="list-price"><?php echo Mage::helper('core')->currency($_product->getFinalPrice()); ?></div>
<div class="rea-buttom">
<?php
// Get the Special Price
$specialprice = Mage::getModel('catalog/product')->load($_product->getId())->getSpecialPrice();
// Get the Special Price FROM date
$specialPriceFromDate = Mage::getModel('catalog/product')->load($_product->getId())->getSpecialFromDate();
// Get the Special Price TO date
$specialPriceToDate = Mage::getModel('catalog/product')->load($_product->getId())->getSpecialToDate();
// Get Current date
$today = time();
if ($specialprice):
if($today >= strtotime( $specialPriceFromDate) && $today <= strtotime($specialPriceToDate) || $today >= strtotime( $specialPriceFromDate) && is_null($specialPriceToDate)):
?>
<img src="/skin/frontend/pro/ic_hemma/images/rea.png" width="20" height="20" />
<?php
endif;
endif;
?>
</div>
<?php $filmUrl = $_product->getFilmUrl(); ?>
<?php if ($filmUrl): ?>
<a href="<?php echo $filmUrl; ?>" class="trailer-trigger" rel="#prompt<?php echo $k ?>" >Film</a>
<div class="trailer" id="prompt<?php echo $k ?>">
<video id="trailer" class="video-js vjs-default-skin" preload="auto" width="640" height="360" data-setup='{"controls":true, "preload": "auto", "autoplay": true, "techOrder": ["flash","html5"]}'>
<source src="<?php echo $filmUrl; ?>" type="video/mp4" />
</video>
</div>
<?php endif; ?>