Video.js列表中的多个视频

时间:2013-06-27 08:34:31

标签: magento video.js

我试图在magento的产品列表中使用video.js来显示产品的预告片。 我想让它与列表中的第一个视频一起工作,但是其他人开始在弹出窗口播放,但是我无法关闭它们,我可以关闭第一个但不能关闭其他视频。

使用的video.js是video.min.js - HTML5视频播放器版本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; ?>

video.js file can be looked at here

0 个答案:

没有答案