时间戳

首页 > 解决方案 > 如何使用 javascript 将 youtube 视频嵌入 wordpress

javascript - 如何使用 javascript 将 youtube 视频嵌入 wordpress

问题描述

有人知道在 javascript 中嵌入 YouTube 视频的方法吗？或者一种在javascript页面上运行简码的方法？我需要一种将 javascript 变量传递到 youtube url 并嵌入视频的方法。到目前为止，我使用的代码是使用一个插件，该插件将此代码作为页面上的简码运行。使用名为 Shortcoder 的插件。

我做了很多研究，通常不会发布新帖子，但我似乎无法找到这个基本问题的答案。如何从 javascript 嵌入 youtube 视频（或运行短代码）。我发现的一件事是这显示了使用 flashplayer 嵌入视频，但我想尽可能避免使用 flashplayer，并且需要它在 javascript 中，以便我可以传递一个变量。这是我在youtube上找到的用于获取变量的代码。

<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 插件的简码，但需要视频 url 受我的网站 url 影响。

例如：www.example.com/video/?v=Y123 应该显示 youtube 视频 www.youtube.com/watch?v=Y123，而 www.example.com/video/?v=x456 应该显示 youtube 视频 www .youtube.com/watch?v=x456

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

有谁知道在 javascript 中嵌入 YouTube 视频的方法或在 javascript 页面上运行简码的方法？

首选短代码，因为它会消除一些额外的限制，并使将来在 wordpress 中实现 javascript 变得更加容易。

编辑：另外，我对 wordpress 有点陌生，虽然在 android studio 有一些经验。

标签： javascriptwordpressvideoyoutubeembed

解决方案

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

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 运行它。

文档 https://developers.google.com/youtube/iframe_api_reference

推荐阅读