html 将视频添加到缩略图
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html 将视频添加到缩略图相关的知识，希望对你有一定的参考价值。
<!-- begin video thumbnails -->
<mvt:comment>SITES EX</mvt:comment>
http://www.polarbearcoolers.com/product/24-pack-H2O.html
http://www.ktm-parts.com/mm5/merchant.mvc?Store_Code=K&Screen=PROD&Product_Code=16500XCW
<mvt:comment>NEW CODE</mvt:comment>
<mvt:item name="html_profile" />
<mvt:if expr="g.show EQ 'quickview'">
<mvt:item name="product_quick_view" />
<mvt:exit />
</mvt:if>
<head>
<mvt:if expr="NOT ISNULL l.settings:product:metafield:title">
<title>&mvt:product:metafield:title;</title>
<mvt:else>
<title>&mvt:product:name;: &mvt:store:name;</title>
</mvt:if>
<mvt:item name="head" param="head_tag" />
<mvt:item name="attributemachine" param="head" />
<mvt:item name="product_display_imagemachine" param="head" />
</head>
<mvt:item name="body">
<mvt:item name="hdft" param="global_header" />
<div class="row hdft-header">
<mvt:item name="hdft" param="header" />
</div>
<div class="row prod-ctgy-hdft-header">
<mvt:item name="prod_ctgy_hdft" param="prod_header" />
</div>
<mvt:item name="product_display" />
<mvt:item name="attributemachine" param="body" />
<script>
if (typeof am&mvt:product:id; !== 'undefined') {
var attrMachCall = am&mvt:product:id;;
};
</script>
<div class="row prod-ctgy-hdft-footer">
<mvt:item name="prod_ctgy_hdft" param="prod_footer" />
</div>
<div class="row hdft-footer">
<mvt:item name="hdft" param="footer" />
</div>
<!-- Google Rich Snippets -->
<div itemscope itemtype="http://data-vocabulary.org/Product">
<meta itemprop="name" content="&mvte:product:name;" />
<meta itemprop="image" content="&mvt:global:socialImage;" />
<meta itemprop="category" content="&mvte:category:name;" />
<meta itemprop="price" content="&mvte:product:price;" />
<meta itemprop="description" content="&mvte:product:descrip;" />
<!-- <meta itemprop="brand" content="" /> For Use With CPF -->
<div itemprop="offerDetails" itemscope itemtype="http://data-vocabulary.org/Offer">
<meta itemprop="identifier" content="upc:&mvte:product:code;" />
<meta itemprop="price" content="&mvt:product:price;" />
<meta itemprop="currency" content="USD" />
<meta itemprop="seller" content="&mvte:global:store:name;" />
<meta itemprop="condition" content="new" />
<mvt:if expr="l.settings:product:inv_active">
<meta itemprop="availability" content="&mvte:product:inv_short;" />
<meta itemprop="quantity" content="&mvte:product:inv_available;" />
</mvt:if>
</div>
</div>
<mvt:item name="hdft" param="global_footer" />
<script>
if ($('#video1').length > 0) {
gallery.push({
src: 'https://www.youtube.com/watch?v=' + $('#video1').attr('data-video'),
type: 'iframe'
});
<mvt:if expr="g.videourl EQ 'youtube'">
$('#js-thumbnails').append('<div class="column one-third medium-one-fourth video" data-vindex="'+thumbnailIndex+'"><img src="http://img.youtube.com/vi/'+'&mvt:global:videouid'+'/0.jpg"></div>');
<mvt:else>
$('#js-thumbnails').append('<div class="column one-third medium-one-fourth video" data-vindex="'+thumbnailIndex+'"><img src="graphics/00000002/miva5/layout/video_default.jpg"></div>');
</mvt:if>
}
if ($('#video2').length > 0) {
gallery.push({
src: 'https://www.youtube.com/watch?v=' + $('#video2').attr('data-video'),
type: 'iframe'
});
thumbnailIndex++;
<mvt:if expr="g.videourl2 EQ 'youtube'">
$('#js-thumbnails').append('<div class="column one-third medium-one-fourth video" data-vindex="'+thumbnailIndex+'"><img src="http://img.youtube.com/vi/'+'&mvt:global:videouid2'+'/0.jpg"></div>');
<mvt:else>
$('#js-thumbnails').append('<div class="column one-third medium-one-fourth video" data-vindex="'+thumbnailIndex+'"><img src="graphics/00000002/miva5/layout/video_default.jpg"></div>');
</mvt:if>
}
if ($('#video3').length > 0) {
gallery.push({
src: 'https://www.youtube.com/watch?v=' + $('#video3').attr('data-video'),
type: 'iframe'
});
thumbnailIndex++;
<mvt:if expr="g.videourl3 EQ 'youtube'">
$('#js-thumbnails').append('<div class="column one-third medium-one-fourth video" data-vindex="'+thumbnailIndex+'"><img src="http://img.youtube.com/vi/'+'&mvt:global:videouid3'+'/0.jpg"></div>');
<mvt:else>
$('#js-thumbnails').append('<div class="column one-third medium-one-fourth video" data-vindex="'+thumbnailIndex+'"><img src="graphics/00000002/miva5/layout/video_default.jpg"></div>');
</mvt:if>
}
if ($('#video4').length > 0) {
gallery.push({
src: 'https://www.youtube.com/watch?v=' + $('#video4').attr('data-video'),
type: 'iframe'
});
thumbnailIndex++;
<mvt:if expr="g.videourl4 EQ 'youtube'">
$('#js-thumbnails').append('<div class="column one-third medium-one-fourth video" data-vindex="'+thumbnailIndex+'"><img src="http://img.youtube.com/vi/'+'&mvt:global:videouid4'+'/0.jpg"></div>');
<mvt:else>
$('#js-thumbnails').append('<div class="column one-third medium-one-fourth video" data-vindex="'+thumbnailIndex+'"><img src="graphics/00000002/miva5/layout/video_default.jpg"></div>');
</mvt:if>
}
</script>
</mvt:item>
</html>
<div class="row bg-white bottom-shadow product-information">
<div class="column whole medium-all-hidden">
<h1 class="normal nm">&mvte:product:name;</h1>
<small>&mvte:product:code;</small>
<div class="breaker"></div>
<mvt:if expr="l.settings:product:price GT 0">
<div id="js-mobile-price-value" class="h3 charcoal nm" data-base-price="&mvt:product:price;">&mvt:product:formatted_price;</div>
<mvt:else>
<div id="js-mobile-price-value" class="all-hidden" data-base-price="&mvt:product:price;"></div>
</mvt:if>
<mvt:if expr="l.settings:product:customfield_values:customfields:rtp GT l.settings:product:price">
<p>MSRP: <s id="js-additional-price">$&mvt:product:customfield_values:customfields:rtp;</s></p>
</mvt:if>
<div id="js-product-discounts"></div>
</div>
<mvt:if expr="g.customer:login EQ 'jsandoval'">
<mvt:if expr="NOT ISNULL l.settings:product:customfield_values:customfields:VID">
<mvt:item name="toolkit" param="newsubstring|videouid|l.all_settings:product:customfield_values:customfields:VID,32,11" />
<mvt:item name="toolkit" param="newsubstring|videourl|l.all_settings:product:customfield_values:customfields:VID,12,7" />
</mvt:if>
<mvt:if expr="NOT ISNULL l.settings:product:customfield_values:customfields:VID2">
<mvt:item name="toolkit" param="newsubstring|videouid2|l.all_settings:product:customfield_values:customfields:VID2,32,11" />
<mvt:item name="toolkit" param="newsubstring|videourl2|l.all_settings:product:customfield_values:customfields:VID2,12,7" />
</mvt:if>
<mvt:if expr="NOT ISNULL l.settings:product:customfield_values:customfields:VID3">
<mvt:item name="toolkit" param="newsubstring|videouid3|l.all_settings:product:customfield_values:customfields:VID3,32,11" />
<mvt:item name="toolkit" param="newsubstring|videourl3|l.all_settings:product:customfield_values:customfields:VID3,12,7" />
</mvt:if>
<mvt:if expr="NOT ISNULL l.settings:product:customfield_values:customfields:VID4">
<mvt:item name="toolkit" param="newsubstring|videouid4|l.all_settings:product:customfield_values:customfields:VID4,32,11" />
<mvt:item name="toolkit" param="newsubstring|videourl4|l.all_settings:product:customfield_values:customfields:VID4,12,7" />
</mvt:if>
</mvt:if>
<div class="column whole medium-half product-information--images">
<span data-icon="T" id="js-main-image-zoom" class="main-image" data-index="0"><img src="graphics/en-US/cssui/blank.gif" alt="&mvte:product:name;" title="&mvte:product:name;" id="js-main-image" data-image="&mvt:product:customfield_values:productimagecustomfields:main;" /></span>
<div class="row thumbnail-wrapper">
<div id="js-thumbnails" class="column whole large-four-fifths np thumbnails"></div>
</div>
<mvt:item name="product_display_imagemachine" param="body:product:id" />
</div>
<!-- end product-information--images -->
<div class="column whole medium-half product-information--purchase">
<div id="js-processing-purchase" class="processing-purchase"><img src="../images/img_ajax_processing.gif" alt="Processing..." title="Processing..." /></div>
<div id="js-purchase-message" class="message message-warning purchase-message"></div>
<div class="row hide medium-show">
<div class="column whole">
<h1 class="normal nm">&mvte:product:name;</h1>
<small>&mvte:product:code;</small>
<div class="breaker"></div>
<mvt:if expr="l.settings:product:price GT 0">
<div id="js-price-value" class="h3 charcoal nm" data-base-price="&mvt:product:price;">&mvt:product:formatted_price;</div>
<mvt:else>
<div id="js-price-value" class="all-hidden" data-base-price="&mvt:product:price;"></div>
</mvt:if>
<mvt:if expr="l.settings:product:customfield_values:customfields:rtp GT l.settings:product:price">
<p>MSRP: <s id="js-additional-price">$&mvt:product:customfield_values:customfields:rtp;</s>
<mvt:else>
<br />
</mvt:if>
<div id="js-product-discounts"></div>
<div class="row">
<div class="column whole social-sharing"><mvt:item name="readytheme" param="thirdpartysharing" /></div>
</div>
<div class="breaker"></div>
<div class="column whole np product-information--description">
<h4 class="nm uppercase">How to Purchase</h4>
<hr noshade />
Motorcycles are not available for purchase online. If you would like to inquire about purchasing a motorcycle, please contact our sales staff at 1-304-932-0437. <br><br />
<h4 class="nm uppercase">Product Details</h4>
<hr noshade />
&mvt:product:descrip;<br><br />
<h4 class="nm uppercase">Contact Sales</h4>
<hr noshade />
<mvt:item name="latu_widgets" param="salescontact" />
</div>
<!-- end product-information--description -->
</div>
<!-- end product-information--purchase -->
<div class="breaker clear"></div>
<mvt:if expr="l.settings:related_product_count NE 0">
<mvt:item name="related_products" />
</mvt:if>
</div>
<!-- end product-information -->
<!-- end video thumbnails -->以上是关于html 将视频添加到缩略图的主要内容，如果未能解决你的问题，请参考以下文章