使用 JS/Regex 用播放器包装 Vimeo URL
Wrap Vimeo URL with Player using JS/Regex
我已经开始开发网站:http://joshrodg.com/isbellfilms2/
我有一个生成定价的 WordPress 插件 table。我喜欢插件的工作方式和用户功能,但需要调整一件事。
该插件有描述的地方,我没有,但我想添加一个视频。
我知道这是一个 WordPress 网站,但我遇到的问题是我的脚本。
我想做的是找到 Vimeo URL 并将其传递给播放器。
我找到了一段代码,稍微调整了一下,但效果不佳。
我使用的 JS 看起来像:
<script type="text/javascript">
$(document).ready(function() {
var classSelector = document.querySelectorAll('.rpt_description');
var vimeoRegEx = /(?:http?s?:\/\/)?(?:www\.)?(?:vimeo\.com)\/?(.+)/g;
var vimeoEmbed = '<div class="embed-container"><iframe src="https://player.vimeo.com/video/" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe></div>';
array.prototype.forEach.call(classSelector, function(el) {
if (vimeoRegEx.test(el.innerHTML)) {
el.innerHTML = el.innerHTML.replace(vimeoRegEx, vimeoEmbed);
}
});
});
</script>
插件输出的代码与 Vimeo URLs:
<div class="rpt_plan rpt_plan_ori rpt_plan_0 ">
<div style="text-align: center; height: 15px;" class="rpt_title rpt_title_0">The Family Yearbook Film</div>
<div class="rpt_head rpt_head_0" style="height: 250px;">
<div class="rpt_recurrence rpt_recurrence_0">(Yearly)</div>
<div class="rpt_price rpt_price_0"><span class="rpt_currency"></span>0</div>
<div style="color:#3ac893;" class="rpt_subtitle rpt_subtitle_0">Stay up to date with your changing family for an entire year.</div>
<div class="rpt_description rpt_description_0">https://www.vimeo.com/320417542</div>
<div style="clear:both;"></div>
</div>
<div class="rpt_features rpt_features_0" style="height: 183px;">
<div style="color:black;" class="rpt_feature rpt_feature_0-0">A 3-5 min film every 3 months (4 total films)</div>
<div style="color:black;" class="rpt_feature rpt_feature_0-1">Plus one Keepsake film</div>
<div style="color:black;" class="rpt_feature rpt_feature_0-2">30% off discount on any additional films you purchase that year.</div>
<div style="color:black;" class="rpt_feature rpt_feature_0-3">Upload 30-450 clips</div>
</div>
<div style="clear:both;"></div>
<a target="_self" href="https://isbellfamilyfilms.com/#order-form" style="background:#3ac893" class="rpt_foot rpt_foot_0">Add to Cart</a>
</div>
正则表达式找到 URL 并且 JS 获取 URL 并将其传递给播放器,有些事情不太正确。我确保这个JS在插件之前执行,但我已经尝试了两种方式。
我确定我遗漏了一些简单的东西,我们将不胜感激。
谢谢,
乔希
完全忘记了jQuery参考,好尴尬!只需要在我的 JS 代码之前添加这一行:
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
我还得大写Array
希望这对某人有所帮助!
乔什
我已经开始开发网站:http://joshrodg.com/isbellfilms2/
我有一个生成定价的 WordPress 插件 table。我喜欢插件的工作方式和用户功能,但需要调整一件事。
该插件有描述的地方,我没有,但我想添加一个视频。
我知道这是一个 WordPress 网站,但我遇到的问题是我的脚本。
我想做的是找到 Vimeo URL 并将其传递给播放器。
我找到了一段代码,稍微调整了一下,但效果不佳。
我使用的 JS 看起来像:
<script type="text/javascript">
$(document).ready(function() {
var classSelector = document.querySelectorAll('.rpt_description');
var vimeoRegEx = /(?:http?s?:\/\/)?(?:www\.)?(?:vimeo\.com)\/?(.+)/g;
var vimeoEmbed = '<div class="embed-container"><iframe src="https://player.vimeo.com/video/" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe></div>';
array.prototype.forEach.call(classSelector, function(el) {
if (vimeoRegEx.test(el.innerHTML)) {
el.innerHTML = el.innerHTML.replace(vimeoRegEx, vimeoEmbed);
}
});
});
</script>
插件输出的代码与 Vimeo URLs:
<div class="rpt_plan rpt_plan_ori rpt_plan_0 ">
<div style="text-align: center; height: 15px;" class="rpt_title rpt_title_0">The Family Yearbook Film</div>
<div class="rpt_head rpt_head_0" style="height: 250px;">
<div class="rpt_recurrence rpt_recurrence_0">(Yearly)</div>
<div class="rpt_price rpt_price_0"><span class="rpt_currency"></span>0</div>
<div style="color:#3ac893;" class="rpt_subtitle rpt_subtitle_0">Stay up to date with your changing family for an entire year.</div>
<div class="rpt_description rpt_description_0">https://www.vimeo.com/320417542</div>
<div style="clear:both;"></div>
</div>
<div class="rpt_features rpt_features_0" style="height: 183px;">
<div style="color:black;" class="rpt_feature rpt_feature_0-0">A 3-5 min film every 3 months (4 total films)</div>
<div style="color:black;" class="rpt_feature rpt_feature_0-1">Plus one Keepsake film</div>
<div style="color:black;" class="rpt_feature rpt_feature_0-2">30% off discount on any additional films you purchase that year.</div>
<div style="color:black;" class="rpt_feature rpt_feature_0-3">Upload 30-450 clips</div>
</div>
<div style="clear:both;"></div>
<a target="_self" href="https://isbellfamilyfilms.com/#order-form" style="background:#3ac893" class="rpt_foot rpt_foot_0">Add to Cart</a>
</div>
正则表达式找到 URL 并且 JS 获取 URL 并将其传递给播放器,有些事情不太正确。我确保这个JS在插件之前执行,但我已经尝试了两种方式。
我确定我遗漏了一些简单的东西,我们将不胜感激。
谢谢,
乔希
完全忘记了jQuery参考,好尴尬!只需要在我的 JS 代码之前添加这一行:
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
我还得大写Array
希望这对某人有所帮助!
乔什