jQuery 来自 Wordpress 文本文件的 iFrame 变量

Question

我正在尝试使用一组 URL 和存储在 Wordpress 文本文件中的参数嵌入视频，这些 URL 和参数在 F5 刷新时随机变化。我不是编码员，但我认为我很接近，但是错了，例子在这里：

我尝试了很多不同的方法，但似乎无法从文件中正确传递参数以在第二个视频帧中显示随机视频和刷新参数。来自上面的link：

第一个视频是带有开始和停止参数的 iframe 嵌入命令并且工作正常
第二个视频是尝试使用 "video" 的 var 作为 src= 值的开头
底部是文件中的随机行，在刷新页面时使用 div class 正确更改，就像我希望视频 link 那样工作。

感谢任何帮助重定向我明显不正确的方法。这是代码：

<iframe width="854" height="480" src="https://www.youtube.com/embed/ad5pmvJ0zMQ?start=1&end=23" frameborder="0" allowfullscreen></iframe>

`<iframe width="854" height="480" src=$video frameborder="0" allowfullscreen></iframe>

<div class="video"></div>

<script type="text/javascript" src="js/jquery.js"></script>
<script>// <
jQuery(document).ready(function($) {
    $.get('/wp-content/slap/video.txt', function(data) {
        var video = data.split("@");
        var idx = Math.floor(video.length * Math.random());
        $('.video').html(video[idx]);
    });
});
</script>

` video.txt

的内容

"https://www.youtube.com/embed/ad5pmvJ0zMQ?start=398&end=418"@
"https://www.youtube.com/embed/ad5pmvJ0zMQ?start=39&end=41"@
"https://www.youtube.com/embed/ad5pmvJ0zMQ?start=98&end=108"@
"https://www.youtube.com/embed/ad5pmvJ0zMQ?start=60&end=67"@
"https://www.youtube.com/embed/ad5pmvJ0zMQ?start=7&end=20"

再次感谢您的帮助，

Answer 1

我发现了一些东西..

.video div 永远不会关闭，因此这可能会导致一些问题。（也许它在您的正常代码中确实如此，但在您上面发布的代码中却没有。
这个：

var video = data.split("@"); idx = Math.floor(video.length * Math.random());

似乎没有按照您的意愿进行。 Math.random()，如果不带参数调用，returns 介于 0 和 1 之间的小数。要使其介于两个数字之间，您必须提供最小值和最大值。在您的代码中， idx 变量很可能只是零。我想你可能想要 idx = Math.random(0, video.length - 1);

您正在将 .video 的 HTML 设置为所选视频的 URL。这是行不通的——您需要使用 URL 填充 iframe 源属性标记才能使其正常工作。这引出了一个问题：您为什么要在 Javascript 中这样做？页面加载后是否需要再次更改随机视频？看起来你只需要 PHP 就可以更简单地做到这一点。您将从文本文件中读取，随机选择 URL 之一，然后在页面加载时输出 <iframe src="$source"> 而不是通过 AJAX 和 Javascript.

Answer 2

对于此处可用的 html 版本，如果有人感兴趣，可以在 jquery 论坛上对 Jake 表示赞赏。（还没有弄清楚如何让它在 WordPress 中工作，这可能是由于 Greg 的回答）。视频文字内容均为原文post。这是代码的 HTML 版本：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>Untitled</title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script>
    </script>
    <style>
iframe {
  width: 100%;
  height: 500px;
  border:1px solid red;
}

    </style>
<script>
jQuery(document).ready(function($) {
    $.get('video.txt', function(data) {
        var video = data.split("@");
        var idx = Math.floor(video.length * Math.random());
        console.log(video[idx])
        $("iframe").attr("src",video[idx]);
    });
});
</script></head>
<body>
<iframe width="854" height="480"  frameborder="0" allowfullscreen></iframe>

<div class="video">

</body>

jQuery 来自 Wordpress 文本文件的 iFrame 变量

jQuery iFrame Variable from Text File in Wordpress

variables

wordpress

iframe

jquery

video-embedding