I have the next url: http://www.climatempo.com.br/tempo-no-seu-site/videos/selo/sul/420x315.
It points to a youtube video, but "the google video id" can change all day, because is a url to weather forecast. Only the url above is fixed.
I am using a digital signage software from a third party and I need create a layout to load this url.
With the software, when creating the layout I can enter the url above, and add custom html and script when the layout will be running.
I have checked with IE the source code when the url is loaded. It´s something as:
<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>
Is possible create a javascript such as when I load the url: http://www.climatempo.com.br/tempo-no-seu-site/videos/selo/sul/420x315
it transforms this page to add "autoplay=1" as:
<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>
I can use only javascript, no jquery.
Some help will be appreciated.
Thanks in advance, Luiz
//////////////////
Sorry, Mr Oliver, It doesnt work. Here is the source code of the page:
<!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]]]-->
Try something like this:
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();
Hope this helps.
So google have IFRAME API, but I'm not sure this will work with your software. Have you given this a thought.
https://developers.google.com/youtube/iframe_api_reference#Requirements
UPDATED - doesn't stop after 6 seconds.
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();
}
My Code Example: http://codepen.io/anon/pen/YwOVPR
Related
I'm creating eLearning content in an application called MadCap Flare.
I'm trying to get the intro bumper video to play and then after the video is done it moves on to another page (we will say url for this forum).
Here is my code, and I cannot get this to work at all. The video plays but it will not move on to the url. When I view source code I see it put in a CDAT error.
<?xml version="1.0" encoding="utf-8"?>
<html xmlns:MadCap="http://www.madcapsoftware.com/Schemas/MadCap.xsd" style="mc-template-page:
url('..\Resources\TemplatePages\Home-Page.flmsp');">
<head>
</head>
<body>
<p>
<video MadCap:HTML5Video="true" MadCap:Param_controls="false" MadCap:Param_loop="false" MadCap:Param_muted="false" src="../Resources/Multimedia/Aruba_Coral.webm" MadCap:Param_autoplay="true">
</video>
<script type="text/javascript">
var video1 = document.getElementsByTagName('video1')[0];
video1.onended = function(e) {
window.location.replace('http://www.hpe.com');
}
</script>
</p>
</body>
</html>
You forgot to add the id attribute to the video tag. Try this :
<html xmlns:MadCap="http://www.madcapsoftware.com/Schemas/MadCap.xsd" style="mc-template-page:
url('..\Resources\TemplatePages\Home-Page.flmsp');">
<head>
</head>
<body>
<p>
<video id="video1" MadCap:HTML5Video="true" MadCap:Param_controls="false" MadCap:Param_loop="false" MadCap:Param_muted="false" src="../Resources/Multimedia/Aruba_Coral.webm" MadCap:Param_autoplay="true">
</video>
<script type="text/javascript">
var video1 = document.getElementById('video1');
video1.onended = function(e) {
window.location.replace('http://www.hpe.com');
}
</script>
</p>
</body>
</html>
I have below code for Youtube API player. I defined functions i.e. playVideo, stopVideo etc. But it gives an error of undefined functions.
After a lot of research, I am still unable to figure out this error.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Videos</title>
<script src="jquery-3.1.1.js"></script>
<script src="script.js"></script>
</head>
<body>
<div id="player">
<iframe id="player" width="560" height="315" src="https://www.youtube.com/embed/sGPrx9bjgC8" frameborder="0" allowfullscreen></iframe>
<br/>
Play||
Stop||
Mute||
</div>
</body>
</html>
**script.js**
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
tag.scr = "https://s.ytimg.com/yts/jsbin/www-widgetapi-vflioRwVn/www-widgetapi.js";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;
window.onYouTubeIframeReady = function(){
player = new YT.Player('player', {
videoId: 'sGPrx9bjgC8',
events: {
'onReady' : onPlayerReady,
}
} );
}
function onPlayerReady(event){
event.target.playVideo();
}
function playVid(){
player.playVideo();
}
function stopVid(){
player.stopVideo();
}
function muteVid(){
player.mute();
}
Here is my erorrs
Try this one.It worked for me.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Videos</title>
<script
src="https://code.jquery.com/jquery-3.1.1.min.js"
integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous"></script>
<script type="text/javascript" src="https://www.youtube.com/iframe_api"></script>
<script type="text/javascript">
var tag = document.createElement('script');
tag.src = "https://s.ytimg.com/yts/jsbin/www-widgetapi-vflioRwVn/www-widgetapi.js";
tag.setAttribute('onload','onYouTubeIframeReady()');
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;
window.onYouTubeIframeReady = function(){
player = new YT.Player('player', {
videoId: 'sGPrx9bjgC8',
events: {
'onReady' : onPlayerReady,
}
} );
}
function onPlayerReady(event){
event.target.playVideo();
}
function playVid(){
player.playVideo();
}
function stopVid(){
player.stopVideo();
}
function muteVid(){
player.mute();
}
</script>
</head>
<body>
<div id="player">
<iframe id="player" width="560" height="315" src="https://www.youtube.com/embed/sGPrx9bjgC8" frameborder="0" allowfullscreen></iframe>
<br/>
</div>
<div>
Play||
Stop||
Mute||
</div>
</body>
</html>
Apparently, your player variable is not set to YT object as you are expecting.
You might be calling the PlayVid() function before the onYouTubeIframeReady callback happens.
Another issue in your code is the fact that you are using the same id="player" name for more than one element on your page. Please, rename your div's id to something else.
For example:
<div id="player-wrapper">
<iframe id="player" width="560" height="315" src="..."
Please bear with me if i'm asking something very basic as I don't know much about coding. I have a stock charting application which has a built-in web browser. I configured this browser to load a html page, which i coded as below, like this mypage.html?symbol=xzy, What i am trying to do here is to capture the submitted html variable, 'symbol' and use its value as part of the url string to load a portion of another third party webpage. I can't figure out what's wrong with my javascript code that is failing to set the value of the 'src' attribute. Any help is most appreciated.
<html>
<header>
<script>
document.getElementById('iframe').src = "http://www.asx.com.au/asx/markets/dividends.do?by=asxCodes&asxCodes="+symbol+"&view=all#dividends";
</script>
</header>
<body>
<div id="dividends"></div>
<iframe id="iframe" src="" style="display:hidden;margin-left: -140px; margin-top: -33px" scrolling="no" frameborder="no" width="398" height="265"></iframe>
</body>
</html>
try move the script after html DOM
<body>
<div id="dividends"></div>
<iframe id="iframe" src="" style="display:hidden;margin-left: -140px; margin-top: -33px" scrolling="no" frameborder="no" width="398" height="265"></iframe>
</body>
<script>
document.getElementById('iframe').src = "http://www.asx.com.au/asx/markets/dividends.do?by=asxCodes&asxCodes="+symbol+"&view=all#dividends";
</script>
A couple of things: 1) start with performing the function onLoad - that way you know the script will run and popluate the src attribute after the browser renders it, and not before.
2) use a function to get the url value.
<html>
<header>
<script>
<!-- source: http://javascriptproductivity.blogspot.com/2013/02/get-url-variables-with-javascript.html -->
function GetUrlValue(VarSearch){
var SearchString = window.location.search.substring(1);
var VariableArray = SearchString.split('&');
for(var i = 0; i < VariableArray.length; i++){
var KeyValuePair = VariableArray[i].split('=');
if(KeyValuePair[0] == VarSearch){
return KeyValuePair[1];
}
}
}
function SetContent(){
var symbol = GetUrlValue('symbol');
document.getElementById('iframe').src = "http://www.asx.com.au/asx/markets/dividends.do?by=asxCodes&asxCodes="+symbol+"&view=all#dividends";
}
</script>
</header>
<body onLoad="SetContent();">
<div id="dividends"></div>
<iframe id="iframe" src="" style="display:hidden;margin-left: -140px; margin-top: -33px" scrolling="no" frameborder="no" width="398" height="265"></iframe>
</body>
</html>
Move the javascript to the bottom of the page AFTER the iframe. You are trying to change an element before it is created. Also do src="about:blank" initially, so it validates.
I am trying to load the html file into Webview downloaded from server. The html file contains the javascript and it is saved in application cache folder. The Webview shows only blank white screen and in log i see this error.
Uncaught ReferenceError: refresh_rates is not defined at file:///data/data/com.app.package/files/aboutus.html:1
Html file source:
<html>
<head>
<style type="text/css">
<!--
body { margin: 0px 0px 0px 0px; }
-->
</style>
<script>
<!--
var intervalID;
function setUpdateRates()
{
refresh_rates ();
intervalID = setInterval(refresh_rates, 50000);
}
function refresh_rates () {
var url ='http://www.google.com';
//alert(url);
document.getElementById('rates').src = url;
}
-->
</script>
</head>
<body onload="setUpdateRates();">
<iframe name="rates" id="rates" src="" width="100%" height="100%" frameborder="0" marginwidth="0" marginheight="0" scrolling="auto"></iframe>
</body>
</html>
Webview:
mWebView.getSettings().setJavaScriptEnabled(true);
mWebView.getSettings().setDomStorageEnabled(true);
mWebView.getSettings().setCacheMode(WebSettings.LOAD_CACHE_ELSE_NETWORK);
mWebView.setScrollBarStyle(WebView.SCROLLBARS_OUTSIDE_OVERLAY);
Loading html file in Webview:
mWebView.loadUrl(mFileLoader.getFilePath(CACHE_HTML));
Please let me know where i am going wrong.
It seems the problem is with commenting tags. So after removing this <!-- , --> and // tags it got worked.
I'm trying to figure out WATIR.
Here is a situation. I want to monitor ads in few websites, but scraping them is not easy task because they are in iframe, then there is another iframe links which is generated with javascript. Only then comes the page which I would like to get.
Here is the code in main page:
<iframe width="300" height="250" scrolling="no" frameborder="0"
id="adbottomleft" src="/ad/left1" name="adbottomleft"></iframe>
Here is what the iframe says:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
body {
background-color: black;
margin:0;
padding:0;
}</style>
</head>
<body>
<!-- Rubicon Project Tag -->
<!-- Site: MangaReader Zone: ROS_BTF_LEFT Size: Medium Rectangle -->
<div id="adfooter" style="width:300px;height:250px;"></div>
<script language="JavaScript" type="text/javascript">
function tl(){
var loaded = 0;
try {
loaded = parent.document['adver'];
} catch(e) { loaded = 0; }
if (loaded != 1) {
setTimeout(tl, 25);
} else {
var dest = document.getElementById('adfooter');
var lframe = document.createElement('iframe');
lframe.setAttribute('id','adbleft');
lframe.setAttribute('width','300');
lframe.setAttribute('height','250');
lframe.setAttribute('scrolling','no');
lframe.setAttribute('frameborder', '0');
lframe.setAttribute('src', 'http://ad.mangareader.net/btleft1');
dest.appendChild(lframe);
}
}
(function (){
tl();
}());
</script>
</body>
</html>
It does generate another iframe which looks like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
* {
margin:0;
padding:0;
}
body {
margin-left: 0px;
margin-top: 0px;
}
</style>
</head>
<body>
<!-- Rubicon Project Tag -->
<!-- Site: MangaReader Zone: ROS_BTF_LEFT Size: Medium Rectangle -->
<script language="JavaScript" type="text/javascript">
var cb = Math.random();
var d = document;
var iframe = "&fr=" + (window != top);
var ref = "";
try {
if (window != top) {
ref = "&rf="+escape(d.referrer);
}
} catch (ignore) { }
d.write("<iframe id='25504.15' name='25504.15' src='' framespacing='0' frameborder='no' scrolling='no' align='middle' width='300' height='250' marginheight='0' marginwidth='0'></iframe>");
d.getElementById('25504.15').src='http://optimized-by.rubiconproject.com/a/8240/13310/25504-15.html?cb='+cb+ref;
</script>
</body>
</html>
Only then comes the final page which I'm interested to scrape.
<html>
<head>
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="expires" content="0">
<style type="text/css"> body {margin:0px; padding:0px;} </style>
<script type="text/javascript">
rubicon_cb = Math.random(); rubicon_rurl = document.referrer; if(top.location==document.location){rubicon_rurl = document.location;} rubicon_rurl = escape(rubicon_rurl);
window.rubicon_ad = "3260765" + "." + "js";
window.rubicon_creative = "3299047" + "." + "js";
</script>
</head>
<body>
<img src="http://assets.rubiconproject.com/campaigns/100/91/16/5/1325630095ap_300.jpg" border="0" alt="AnimePremium.net" /><script defer="defer" type="text/javascript">
{
if (Math.floor(Math.random()*100) < 1)
{
var url;
var iframe = (window != top);
url = "http://tap.rubiconproject.com/stats/iframes?pc=8240/13310&ptc=25504&upn="+iframe;
setTimeout(function(){ new Image().src = url }, 1000);
}
}
</script>
<script>var _comscore = _comscore || []; _comscore.push({ c1: "8", c2: "6135404", c3: "28", c4: "13310", c10: "3299047" }); (function() { var s = document.createElement("script"), el = document.getElementsByTagName("script")[0]; s.async = true; s.src = (document.location.protocol == "https:" ? "https://sb" : "http://b") + ".scorecardresearch.com/beacon.js"; el.parentNode.insertBefore(s, el); })();</script><DIV STYLE="height:0px; width:0px; overflow:hidden"><IFRAME SRC="http://tap2-cdn.rubiconproject.com/partner/scripts/rubicon/emily.html?rtb_ext=1&pc=8240/13310&geo=eu" FRAMEBORDER="0" MARGINWIDTH="0" MARGINHEIGHT="0" SCROLLING="NO" WIDTH="0" HEIGHT="0" style="height:0px; width:0px"></IFRAME></DIV>
</body>
</html>
Impossible task?
here is what I'm doing.
irb
require "watir-webdriver"
browser = Watir::Browser.new :ff
browser.goto "mangareader.net"
browser.frame(:id, "adbottomleft").html - Works!
If I want to get one more layer down I get error
irb
require "watir-webdriver"
browser = Watir::Browser.new :ff
browser.goto "mangareader.net"
browser.frame(:id, "adbottomleft").frame(:id, "adleft").html -> Don't work.
Element belongs to a different frame than the current one - switch to it's containing frame to use it.
What should I change in the 2nd code to make it read the next iframe?
I have been searching for days. Started with selenium then htmunit with c# then tried mechanize with python, but couldn't achieve wanted results.
I keep jumping. I finally thought that I will be able to achieve what I wanted with WATIR.
I need some help to get this done. Any tips?
The ID of the frame created by the script is "adbleft" not "adleft" that might be your problem
browser.frame(:id => "adbottomleft").frame(:id => "adbleft").html
If the id of the final frame is not static, you might have to select it by index
browser.frame(:id => "adbottomleft").frame(:id => "adbleft").frame(:index => 0)