Question

我有下一个网址：http://www.climatempo.com.br/tempo-no-seu-site/videos/selo/sul/420x315。

它指向YouTube视频，但“Google视频ID”可以全天更改，因为它是天气预报的网址。只有上面的网址是固定的。

我正在使用来自第三方的数字标牌软件，我需要创建一个布局来加载此网址。

使用该软件，在创建布局时，我可以输入上面的URL，并在布局运行时添加自定义html和脚本。

我在加载网址时用IE检查了源代码。这是：

<html>
<title>Climatempo - Selo de Videos: SUL</title>
<body bgcolor="black" style="padding:0!important;margin:0!important" >
<iframe width="420" height="315" src="https://www.youtube.com/embed/YPlee8K0ViE" frameborder="0" allowfullscreen></iframe>
</body>
</html>

可以创建一个javascript，例如当我加载网址时：http://www.climatempo.com.br/tempo-no-seu-site/videos/selo/sul/420x315 它转换此页面以添加“autoplay = 1”：

 <html>
    <title>Climatempo - Selo de Videos: SUL</title>
    <body bgcolor="black" style="padding:0!important;margin:0!important" >
    <iframe width="420" height="315" src="https://www.youtube.com/embed/YPlee8K0ViE?autoplay=1" frameborder="0" allowfullscreen></iframe>
    </body>
    </html>

我只能使用javascript，没有jquery。一些帮助将不胜感激。

先谢谢，Luiz

////////////////// 对不起，奥利弗先生，它不起作用。以下是该页面的源代码：

<!doctype html>
<html lang="en">
    <head>
        <title>Xibo Open Source Digital Signage</title>
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=874.31921824104" />
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <!-- Copyright 2006-2014 Daniel Garner. Part of the Xibo Open Source Digital Signage Solution. Released under the AGPLv3 or later. -->
        <style type="text/css">
            body {
                margin: 0;
                overflow: hidden;
                font-family: sans-serif, Arial, Verdana, "Trebuchet MS";
            }
            h1, h2, h3, h4, p {
                margin-top: 0;
            }
            #iframe {
                border: 0;
            }
            .cycle-slide p, p.cycle-slide {
                margin-bottom:0;
            }
        </style>
        <style type="text/css">

</style>
        <link href="modules/preview/fonts.css" rel="stylesheet" media="screen"><style type="text/css"></style>
    </head>
    <!--[if lt IE 7 ]><body class="ie6"><![endif]-->
    <!--[if IE 7 ]><body class="ie7"><![endif]-->
    <!--[if IE 8 ]><body class="ie8"><![endif]-->
    <!--[if IE 9 ]><body class="ie9"><![endif]-->
    <!--[if (gt IE 9)|!(IE)]><!--><body><!--<![endif]-->
        <div id="content"><html>
    <title>Climatempo - Selo de Videos: SUL</title>
    <body bgcolor="black" style="padding:0!important;margin:0!important" >
    <iframe id="myframe" width="420" height="315" src="http://www.climatempo.com.br/tempo-no-seu-site/videos/selo/sul/420x315" frameborder="0" ></iframe>
    </body>
    </html>
</body>
</html></div>
    </body>
    <script src="modules/preview/vendor/jquery-1.11.1.min.js"></script><script src="modules/preview/xibo-layout-scaler.js"></script><script type="text/javascript">
function EmbedInit()
{
    // Init will be called when this page is loaded in the client.
var firstIframe = document.getElementsById("myframe");

//get the current source
var src = firstIframe.src;

//update the src with "autoplay=1"
var newSrc = src+'?autoplay=1';

//change iframe's src
firstIframe.src = newSrc;
    return;
}
</script><script type="text/javascript">   var options = {"originalWidth":"874.31921824104","originalHeight":"436.5342019544","previewWidth":"1255.6954397394104","previewHeight":"626.9495114006552","scaleOverride":0};   $(document).ready(function() { EmbedInit(); });</script>
</html>
<!--[[[CONTROLMETA]]]-->

Answer 1

尝试这样的事情：

HTML：

<html>
<title>Climatempo - Selo de Videos: SUL</title>
<body bgcolor="black" style="padding:0!important;margin:0!important" >
<iframe id = "myFrame" width="420" height="315" src="https://www.youtube.com/embed/YPlee8K0ViE" frameborder="0" allowfullscreen></iframe>
</body>
</html>

使用Javascript：

var iFrame = document.getElementById("myFrame");
    iFrame.src = iFrame.src + '?autoplay=1';
    iFrame.contentWindow.location.reload();

希望这有帮助。

Answer 2

所以google有IFRAME API，但我不确定这适用于你的软件。你有没有想过这个想法。

https://developers.google.com/youtube/iframe_api_reference#Requirements

更新 - 6秒后不会停止。

HTML：

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

使用Javascript：

  // 2. This code loads the IFrame Player API code asynchronously.
  var tag = document.createElement('script');

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

  // 3. This function creates an <iframe> (and YouTube player)
  //    after the API code downloads.
  var player;
  function onYouTubeIframeAPIReady() {
    player = new YT.Player('player', {
      height: '390',
      width: '640',
      videoId: 'YPlee8K0ViE',
      events: {
        'onReady': onPlayerReady
      }
    });
  }

  // 4. The API will call this function when the video player is ready.
  function onPlayerReady(event) {
    event.target.playVideo();
  }

我的代码示例：http://codepen.io/anon/pen/YwOVPR

用javascript改变页面内容

2 个答案: