Question

我想让youtube视频自动嵌入到网页中。

该网页已从网址传递了关键字：/view.php?id=keywords123 这些用于在模板上创建内容，我还需要它来显示来自youtube的相关视频。

是否有代码会搜索youtube并返回要嵌入的嵌入代码或视频ID？

提前干杯！

Answer 1

检查link from IBM。这是一个非常古老的链接，但我想先做类似的事情，并帮助了我很多。它有一些关于如何执行关键字搜索和解析xml响应的示例。

Answer 2

查看Youtube Player API

Youtube播放器演示： http://code.google.com/apis/youtube/youtube_player_demo.html

Youtube Actionscript播放器api： http://code.google.com/apis/youtube/flash_api_reference.html

Youtube Javascript播放器api： http://code.google.com/apis/youtube/js_api_reference.html

Answer 3

我使用jquery来获取youtube embed url：

var re = /https?:\/\/(?:[0-9A-Z-]+\.)?(?:youtu\.be\/|youtube\.com\S*[^\w\-\s])([\w\-]{11})(?=[^\w\-]|$)(?![?=&+%\w]*(?:['"][^<>]*>|<\/a>))[?=&+%\w-]*/ig;

video_url= text.replace(re,'http://www.youtube.com/embed/$1');

html='<p><iframe width="100%" height="300" src="'+video_url+'" frameborder="0"></iframe></p>';

$("#video_place").append(html);

Answer 4

我建议你使用json api，以下是代码，干杯。

  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

  <script type="text/javascript" src="http://swfobject.googlecode.com/svn/trunk/swfobject/swfobject.js"></script>
  <script type="text/javascript">

  $(function(){

      $("a").click(function(){
          alert("");
          $("#sc").attr("src","http://gdata.youtube.com/feeds/users/ThePitchUTV/uploads?alt=json-in-script&callback=showMyVideos2");


          });


      });

function loadVideo(playerUrl, autoplay) {
  swfobject.embedSWF(
      playerUrl + '&rel=1&border=0&fs=1&autoplay=' + 
      (autoplay?1:0), 'player', '500', '400', '9.0.0', false,
      false, {allowfullscreen: 'true'});
}




function showMyVideos(data) {
  var feed = data.feed;
  var entries = feed.entry || [];
  var html = ['<ul>'];
  for (var i = 0; i < entries.length; i++) {
    var entry = entries[i];
    var title = entry.title.$t;
    html.push('<li>', title, '</li>');
  }
  html.push('</ul>');
  document.getElementById('videos').innerHTML = html.join('');
}


</script>
<script src="http://www.google.com/uds/api?file=uds.js&v=1.0"
    type="text/javascript"></script>
<link href="http://www.google.com/uds/css/gsearch.css"
    rel="stylesheet" type="text/css"/>
<script src="http://www.google.com/uds/solutions/videobar/gsvideobar.js"
    type="text/javascript"></script>
<link href="http://www.google.com/uds/solutions/videobar/gsvideobar.css"
    rel="stylesheet" type="text/css"/>
<style>
pre {
  background-color:#FAFAFA;
  border:1px solid #BBBBBB;
  font-size:9pt;
  line-height:125%;
  margin:1em 0pt 0pt;
  overflow:auto;
  padding:0.99em;
}
code, pre {
  color:#007000;
  font-family:monospace;
}
.titlec {
  font-size: small;
}
ul.videos li {
  float: left;
  width: 10em;
  margin-bottom: 1em;
  cursor:pointer;
}
ul.videos
{
  margin-bottom: 1em;
  padding-left : 0em;
  margin-left: 0em;
  list-style: none;
}
#videoBar {
  width : 160px;
  margin-right: 5px;
  margin-left: 5px;
  padding-top : 4px;
  padding-right : 4px;
  padding-left : 4px;
  padding-bottom : 0px;
}
</style>
</head>
<body>





  <div id="playerContainer" style="width: 20em; height: 400px; float: left; position:relative">
    <object id="player"></object>
  </div>
  <br>
  <div id="videos2" style="width:500px; clear:both;height:300px; overflow:auto;"></div>
  <script id="sc" 
    type="text/javascript" 
    src="http://gdata.youtube.com/feeds/users/ThePitchUTV/uploads?alt=json-in-script&callback=showMyVideos">



  </script>

用于搜索和嵌入YouTube视频的脚本

4 个答案: