Question

我有一个大于20MB的网页（太大），问题是每个youtube视频都约500 KB！我想使用HTML5选择选项列出30多个视频。该值是youtube视频ID。然后，用户从下拉选项中选择所需的视频。然后，视频会加载到iframe中。 <表格> 这是有效的“模板”，但我想用选定的选项值替换src字符串中的“ nlD9JYP8u5E”。能做到吗？ <文章>

Answer 1

在.replace()中使用正则表达式来更改iframe的src属性。在jquery中，我在选择元素的.attr()事件监听器中使用过的元素的change更改属性

$("#dynamic_select").change(function(){
    var val = $(this).val();
    $("iframe").attr("src", function(i, a){
        return a.replace(/(?<=embed\/)[^?]+/, val);
    });
});

$("#dynamic_select").change(function(){
    var val = $(this).val();
    $("iframe").attr("src", function(i, a){
        return a.replace(/(?<=embed\/)[^?]+/, val);
    });
    console.log($("iframe").attr("src"));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <select id="dynamic_select">
    <option value="" selected>Pick a Key and Peele youtube video</option>
    <option value="pSDTmJtE-Bc">Little Homie</option>
    <option value="Dd7FixvoKBw">Substitute Teacher</option>
    <option value="iGAMbNKcN1U">Fronthand Backhand</option>
  </select>
</form>
<article>
  <iframe src="https://www.youtube.com/embed/nlD9JYP8u5E?rel=0&amp;showinfo=0"> 
</iframe>
</article>

Answer 2

为您的文章添加ID（

let target=document.getElementById('viewvideo'), myiframe=document.createElement('iframe'); myiframe.src='the url i want to display'; target.innerHTML='';/** empty the previous one then set content with current iframe*/ target.appendChild(myiframe);

当然，“ on我想显示的url”字符串将通过onChange事件之类的值给出。

Answer 3

这可以通过JavaScript完成。

此脚本的作用是在单击按钮时调用函数submitted，此函数会更改视频的来源。

我没有使用<input type="submit">，因为这会重新加载页面，而且我不确定如何防止这种情况。

<script>
function submitted(){
    link = document.getElementById("dynamic_select").value;
  document.getElementById("video").src = "https://www.youtube.com/embed/"+link+"?rel=0&amp;showinfo=0";
}
</script>
<form onsubmit="return false;">

<select id="dynamic_select">
<option value="" selected>Pick a Key and Peele youtube video</option>
<option value="pSDTmJtE-Bc">Little Homie</option>
<option value="Dd7FixvoKBw">Substitute Teacher</option>
<option value="iGAMbNKcN1U">Fronthand Backhand</option>
</select>
<button onclick="submitted()">Submit</button>
</form>

<article>

<iframe id="video" class = "youtube" src="https://www.youtube.com/embed/nlD9JYP8u5E?rel=0&amp;showinfo=0"> 
</iframe>

</article>

如何使用javascript / jquery根据<select>值更改iframe的src属性？

3 个答案: