Question

我尝试使用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中，我得到的是一个空白的div，其中应该是youtube视频。

我在这里缺少什么？

提前致谢

修改

更多信息和代码，正如亚当问的那样

用户点击自定义的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)位于init(){内，该<body onload='init();'>来自videogaledit init位于{{1}}

之外

Answer 1

参考：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>

Answer 2

我想我得到了解决方案......这只是一个草案。工作正常，但我应该说，我在控制台中收到一些警告，主要是关于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获取数据的数组。包含{you}数据的y或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

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

视频库与youtube视频 - 无法嵌入

2 个答案: