0

我尝试用 youtube 视频实现一个视频库。

这是现在的代码。

//html...
<div id="videogal" ></div>


//javascript
//initializing the gallery
//mplv is an array, getting data after a query in the db
//mplv[0] contains https://www.youtube.com/watch?v=hLgJjlFIxGA
document.getElementById("videogal").innerHTML='<object id="viewer" width="575" height="344"><embed  src="' + mplv[0] + '" type="application/x-shockwave-flash" allowfullscreen="true" width="575" height="344"></embed></object>';

我无法让它工作。在 FF 和 IE 和 GC 中，我得到的只是divyoutube 视频应该在哪里的空白。

我在这里想念什么？

提前致谢

编辑

亚当问的更多信息和代码

用户单击定制的 openlayers 地图中的一个点。

//this activated when a point is clicked
function selected_feature(event){
   //openlayers stuff here....
   //query , and fill mplv[]
   //simply call
    videogaledit(0);

   //0 is for initialize, like setting the first video 
}

接着

function videogaledit(j) {

if (j==0){

    alert('what is the link now    '+mplv[0]);//works fine


    document.getElementById("videogal").innerHTML='<object id="viewer" width="575" height="344"><embed  src="' + mplv[0] + '" type="application/x-shockwave-flash" allowfullscreen="true" width="575" height="344"></embed></object>';

}

selected_feature(event)is insideinit(){被调用 from <body onload='init();'> videogaleditis outsideinit

4

2 回答 2

0

我想我得到了解决方案……这只是一个草稿。工作正常，但我应该说，我在控制台中收到了一些警告，主要是关于 CSS。

所以这里是代码。

//html
<div id="videogal" ></div>


//javascript

//at the begining of javascript, outside init function
var elemv = document.createElement("video");
elemv.setAttribute("height", "600");
elemv.setAttribute("width", "800");
elemv.setAttribute("controls", "true");
elemv.setAttribute("type","application/x-shockwave-flash");

//function selected_feature(event) stays the same

//initializing...
function videogaledit(j) {

if (j==0){
     if(mtyv[0]=='v')
     {document.getElementById("videogal").innerHTML=' ';
      elemv.src=mplv[0];
      document.getElementById("videogal").appendChild(elemv);   
     }

//
     if(mtyv[0]=='y'){
     document.getElementById("videogal").innerHTML='<object id="viewer" >'+mplv[0]+'</object>';
     }

mplv[0]现在包含<iframe width="640" height="360" src="//www.youtube.com/embed/1RXiNkrqxbs" frameborder="0" allowfullscreen></iframe>

我想我可以告诉我的用户复制该代码而不是链接。

mtyv[0]在查询之后，它是另一个从 db 获取数据的数组。包含yyoutube 数据或v视频，如upolad/aVideoUploadedByAUser.mp4

适用于 youtube 和上传到服务器的视频。也适用于 GC 29.0、FF 24 和 IE 10。

我得到的最可怕的错误是在 Chrome 的控制台中。说 Blocked a frame with origin "http://www.youtube.com" from accessing a frame with origin "http://localhost". Protocols, domains, and ports must match. www-embed-player-vfln1DfCN.js:101

老实说，我不知道它的实际含义以及如何调试它。

于 2013-09-28T00:31:13.087 回答
0

参考：https
://developers.google.com/youtube/iframe_api_reference演示：http: //mattia-asti.it/tests/youtube.html
（托管在我的网站上，因为我想 jsfiddle 不适用于 iframe） 

<!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
<div id="player"></div>

<script>

var mplv = ['hLgJjlFIxGA'];

var tag = document.createElement('script');

tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

var player;

function onYouTubeIframeAPIReady() {
    player = new YT.Player('player', {
        height: '344',
        width: '575',
        videoId: mplv[0]
    });
}
</script>
于 2013-09-27T19:16:08.693 回答