首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >如何用javascript将youtube视频嵌入wordpress

如何用javascript将youtube视频嵌入wordpress
EN

Stack Overflow用户
提问于 2018-11-22 04:29:31
回答 2查看 1.2K关注 0票数 0

有人知道在javascript中嵌入YouTube视频的方法吗?还是用javascript在页面上运行一个短代码的方法?我需要一种将javascript变量传递到youtube url并嵌入视频的方法。到目前为止,我所拥有的代码是使用一个插件,它将此代码作为页面上的一个短代码运行。使用一个叫做短编码器的插件。

我做了很多研究,通常不会发新的帖子,但我似乎找不到这个基本问题的答案。如何从javascript嵌入youtube视频(或运行短代码)。我发现的一件事是,它显示了在flashplayer中嵌入视频,但是如果可能的话,我想避免闪存,并且需要它在javascript中,这样我就可以传递一个变量。下面是我在YouTube上找到的用于获取变量的代码。

代码语言:javascript
运行
复制
<script text="text/javascript">
var getUrlParameter = function getUrlParameter(sParam) {
    var sPageURL = decodeURIComponent(window.location.search.substring(1)),
        sURLVariables = sPageURL.split('&'),
        sParameterName,
        i;
    for (i = 0; i < sURLVariables.length; i++) {
        sParameterName = sURLVariables[i].split('=');
        if (sParameterName[0] === sParam) {
            return sParameterName[1] === undefined ? true : sParameterName[1];
        }
    }
};

var video = getUrlParameter('v');

if(video){
   console.log('v='+video);
   // embed video with url

}else {
   console.log('v=null');
   // embed youtube uploads playlist

}

我需要一种方法嵌入youtube视频,或运行youtube wordpress插件的短代码,但需要视频网址,以影响我的网站网址。

例如:www.example.com/视频/?v=Y 123应该显示youtube视频www.youtube.com/watch?v=Y 123,而www.example.com/ video /?v=x456应该显示youtube视频www.youtube.com/watch?v=x456。

我基本上是为我的视频创建一个youtube页面,但计划添加一个实时聊天,从我的网站观看从网站上的任何地方观看的子可以使用。我也可以,可能在将来的某个时候,为教程添加自动暂停视频。

有人知道在javascript中嵌入YouTube视频的方法还是在javascript中的页面上运行短代码的方法吗?

更倾向于使用一个短代码,因为它将消除一些额外的限制,并使将来将javascript实现到wordpress中变得更加容易。

编辑:而且,我对wordpress有点陌生,虽然我在android工作室有一些经验。

EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2018-11-22 06:59:11

好吧,我想我想出办法让它起作用了。下面是我的代码,如果其他人需要它,如下所示:

代码语言:javascript
运行
复制
<iframe name="videoURL" id="videoURL" width="560" height="315" src="https://www.youtube.com/embed/ymHNtBZxFKY" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

<script text="text/javascript">
var getUrlParameter = function getUrlParameter(sParam) {
    var sPageURL = decodeURIComponent(window.location.search.substring(1)),
        sURLVariables = sPageURL.split('&'),
        sParameterName,
        i;
    for (i = 0; i < sURLVariables.length; i++) {
        sParameterName = sURLVariables[i].split('=');
        if (sParameterName[0] === sParam) {
            return sParameterName[1] === undefined ? true : sParameterName[1];
        }
    }
};

var video = getUrlParameter('v');
var url;

if(video){
   console.log('v='+video);
   url = 'https://www.youtube.com/embed/'+video;
   // embed video with url

}else {
   console.log('v=null');
   // embed youtube uploads playlist
   url = 'https://www.youtube.com/embed?listType=playlist&list=UU7YyXO5sOuG4zmGlW7KDCNw'
}

  document.getElementById("videoURL").setAttribute("src", url);

</script>
票数 0
EN

Stack Overflow用户

发布于 2018-11-22 04:57:52

videoId:视频后面的id,即视频是“11D9G4D1p-Y” https://www.youtube.com/watch?v=1lD9G4D1p-Y

代码语言:javascript
运行
复制
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

window.onYouTubePlayerAPIReady = function() {
        window.player = new YT.Player('elementId');
        window.player.cueVideoById({'videoId': 'yourVideoId',
          'suggestedQuality': 'medium'});
}

我的代码和他们的代码之间的区别在于我的代码使用JavaScript添加脚本,他们的代码使用HTML添加脚本,然后使用JavaScript运行脚本。

文档 参考文献

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/53423910

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档