如何显示来自其他站点的视频内容答案

【问题标题】：How can I display video content from another site如何显示来自其他站点的视频内容
【发布时间】：2015-11-01 04:48:22
【问题描述】：

好的，所以我想在我的网站上有很多视频可供选择，所有这些视频都来自archive.org。我最初认为可能是 iframe，当用户单击视频标题时，iframe 源会更改为所选视频。只是想知道有没有更好的方法？欢迎任何建议和建议。我尝试过的带有播放列表的 archive.org 的 iframe。

  <script>
    jwplayer("playa").setup({
        "playlist": [
            { duration:5, 
              title:"camels",
              image:"https://archive.org/download/camels/format=Thumbnail", 
              sources:[ 
                  {file:"https://archive.org/download/camels/camels.mp4"}, 
                  {file:"https://archive.org/download/camels/camels.ogv"} ] 
            },
            { duration:115,
              title:"commute",
              image:"https://archive.org/download/commute/format=Thumbnail", 
              sources:[ 
                  {file:"https://archive.org/download/commute/commute.mp4"}, 
                  {file:"https://archive.org/download/commute/commute.ogv"} ] 
            },
            { duration:5717, 
              title:"night of the living dead",
              image:"https://archive.org/download/night_of_the_living_dead/format=Thumbnail", 
              sources:[ 
                  {file:"https://archive.org/download/night_of_the_living_dead/night_of_the_living_dead_512kb.mp4"}, 
                  {file:"https://archive.org/download/night_of_the_living_dead/night_of_the_living_dead.ogv"} ]
            }
        ],
        "startparam":"start",
        "repeat":"list",
        "width":714,
        // adjust these 2 lines if you'd like to omit/resize playlist, etc:
        listbar:{position:"bottom",size:100,layout:"basic"},
        "height":360,
    });
  </script></div>

&lt;div id="playa"&gt; &lt;/div&gt;

但这并不是我想要的。抱歉，它非常广泛，我只是不确定如何尝试。

【问题讨论】：

到目前为止您尝试过什么？向我们展示您在问题本身中尝试过的代码的 sn-ps 更好
我尝试将 archive.org 的 iframe 与播放列表一起使用。我只是在帖子中包含了我尝试过的内容

标签： javascript iframe video

【解决方案1】：

在这个JSFiddle 中，我使用每个链接<a> 的属性href 的值将其作为src 值注入iframe 元素中

JS：

$('.links').on('click', function(evt){
    evt.preventDefault();
    var vidSrc = $(this).attr('href');
    $('iframe').attr('src', vidSrc);
});

HTML：

<div id="titles">
    <a class="links" href="https://archive.org/embed/FinalFantasy2_356">Final Fantasy 2</a>
    <a class="links" href="https://archive.org/embed/MortalKombatSM_14337">Mortal Kombat SM</a>
    <a class="links" href="https://archive.org/embed/Quake4_20954">Quake4</a>
</div>
<iframe src="" width="400" height="300" frameborder="0"></iframe>

【讨论】：