I am building a site where anyone in management can access the security cams in the different stores. I have built using iframes so that the manager can choose which store they want. Once they choose the store, I want the page to refresh every 6 seconds but error out after 3 minutes. This will keep from streaming data continuously.
So here is what I have, but something isn't right
<title>Store #1901(low-rez)</title>
<center><font color ="blue">Store 1901 (<b>Medium</b> / Small)</center>
<iframe src="cam1.html" width="380" height="295" frameborder="0" >
</iframe>
<iframe src="cam2.html" width="380" height="295" frameborder="0" >
</iframe>
<iframe src="cam3.html" width="380" height="295" frameborder="0" >
</iframe>
<iframe src="cam4.html" width="380" height="295" frameborder="0" >
</iframe>
<iframe src="cam5.html" width="380" height="295" frameborder="0" >
</iframe>
<iframe src="cam6.html" width="380" height="295" frameborder="0" >
</iframe>
<iframe src="cam7.html" width="380" height="295" frameborder="0" >
</iframe>
<iframe src="cam8.html" width="380" height="295" frameborder="0" >
</iframe>
<iframe src="cam10.html" width="380" height="295" frameborder="0" >
</iframe>
<script type="text/javascript">
var intervalID = 0;
function windowOnInitialize()
{
intervalID = setInterval("refresh()", 6000);
//alert("we were called");
}
var counter = 0;
function refresh()
{
//alert("we got to if statement");
if (counter < 50)
{
counter++;
//alert(counter);
document.getElementById("theId").src="small.html" + Math.random();
}
else
{
//alert("");
alert("Your Time is Up");
clearInterval(intervalID);
}
}
</script>
<body onload="windowOnInitialize()">
<img id="theId" src="small.html" />
I have tried the script above and below the iframe section and it isn't working either place. I am sorry if this is a repeated question or rather elementary, I am just learning to code. I have always worked network and not scripting.
The setInterval function expects a function as the first parameter. You have passed a string "refresh()". So, change the line intervalID = setInterval("refresh()", 6000); to pass the function instead - intervalID = setInterval(refresh, 6000);.
setInterval
Related
In the beginning,the video is show,but the it is stop.
I want to play the video when browser starts.
<html>
<head></head>
<body>
<!-- NOTE: ?api=1 and player_id at the end of the URL -->
<iframe id="player" width="" height="" src="http://player.vimeo.com/video/62207569?api=1&player_id=player" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
<script src="http://a.vimeocdn.com/js/froogaloop2.min.js"></script>
<script>
var player = $f(document.getElementById('player'));
player.addEvent('ready', function() {
player.api('play');
});
</script>
</body>
</html>
The froogaloop2 js is not working now try to use player.vimeo.com/api/player.js.
Just try like this
<iframe id="player" width="" height="" src="http://player.vimeo.com/video/62207569?api=1&player_id=player" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
<script src="https://player.vimeo.com/api/player.js"></script>
<script>
var frame = document.querySelector('iframe');
var jqueryPlayer = new Vimeo.Player(frame);
jqueryPlayer.play();
console.log('played the video!');
</script>
I have run this code, just check the out put
You can refer to this https://github.com/vimeo/player.js#create-a-player for more details.
I want to embed external link to my anchor tag with javascript.
When i press on achor tag, which is actually an image, i want to load < iframe > with that external link.
Firstly i need iframe to be hidden and only show when the anchor tag is clicked.
This is what i have so far:
html
<iframe name="myIframe" height="600" width="800" frameborder="0"></iframe>"<img src="img/icon.png">
js
function openUrl(){
var myUrl = "https://www.youtube.com/embed/zBFGkUmVkAs";
document.getElementsByName('myIframe')[0].src = myUrl;
}
});
But it doesn't work
Any help please?
Thanks!
#aiden87
Try this code below, I have made a demo please check this link. https://jsfiddle.net/saujankmarv/p7z38rhq/8/
html:
<a href="#" id="atag">
<img src="img/icon.png">
<iframe style="display:none;" id="myFrame"></iframe>
</a>
js
var openUrl = function() {
console.log('log');
var iframe = document.getElementById("myFrame");
iframe.src = "https://www.youtube.com/embed/zBFGkUmVkAs";
iframe.style.display = "block";
}
document.getElementById('atag').addEventListener('click', openUrl);
You can try this:
function openUrl() {
var iframe = document.getElementById("myFrame");
iframe.style.display = "block";
iframe.attr('src' , 'https://www.youtube.com/embed/zBFGkUmVkAs');
}
<a href="#" onclick="openUrl();">
<img src="img/icon.png">
</a>
<iframe width="560" height="315" id="myFrame" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen style="display:none">
</iframe>
Try this.
function openUrl() {
var iframe = document.getElementById("myFrame");
iframe.style.display = "block";
}
<img src="img/icon.png">
<iframe width="560" height="315" id="myFrame" src="https://www.youtube.com/embed/zBFGkUmVkAs" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen style="display:none"></iframe>
Inline click handlers are not the best solution , you can hide the iframe initially and then toggle its visibility.
$('a').on('click' , function(){
$(this).find('iframe').attr('src' , 'https://www.youtube.com/embed/zBFGkUmVkAs');
$(this).find('iframe').slideToggle(0);
return false;
})
a > iframe {
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<iframe name="myIframe" height="600" width="800" frameborder="0"></iframe>"<img src="https://zartnerds.files.wordpress.com/2015/10/thumbnail.png">
I have several youtube iframes with TV channels on my website page.
<div>
<iframe id="ytplayer" src="https://www.youtube.com/embed/ntBxGznOML0?rel=0&enablejsapi=1&autoplay=0&controls=1&showinfo=0&loop=1&iv_load_policy=3&modestbranding=0" frameborder="0" allowfullscreen></iframe>
</div>
<div>
<iframe id="ytplayer" src="https://www.youtube.com/embed/zl4aeAfhdro?rel=0&enablejsapi=1&autoplay=0&controls=1&showinfo=0&loop=1&iv_load_policy=3&modestbranding=0" frameborder="0" allowfullscreen></iframe>
</div>
<div>
<iframe id="ytplayer" src="https://www.youtube.com/embed/URD4UWm-edg?rel=0&enablejsapi=1&autoplay=0&controls=1&showinfo=0&loop=1&iv_load_policy=3&modestbranding=0" frameborder="0" allowfullscreen></iframe>
</div>
<div>
<iframe id="ytplayer" src="https://www.youtube.com/embed/75j9l956bVs?rel=0&enablejsapi=1&autoplay=0&controls=1&showinfo=0&loop=1&iv_load_policy=3&modestbranding=0" frameborder="0" allowfullscreen></iframe>
</div>
I'm trying to use one java script to play video muted and to stop it on pause event but it doesnt work for me. The script is following
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('ytplayer', {
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
function onPlayerStateChange(event){
player.stopVideo(0);
}
}
function onPlayerReady(event) {
player.mute();
player.playVideo();
}
I need to full stop video on pause event, because it is live tv channel, so if I press pause now, in 10 minutes I will get a record but not a live stream. How can I make my script work?
UPDATE
OP has multiple players and uses plain JavaScript, the following changes are:
Multiple players shared the same id, now each player has a unique id.
Added a <button class='stop' data-id='yt*'>STOP</button> for each player.
Each button has a data-id. It's value corresponds to it's player's id.
Wrapped <section id='videoChannels'></section> around everything.
Added the eventListener to #videoChannels so when a button is clicked #videoChannels is referred to as the target.currentTarget which can be compared to the event.target to determine the button that was clicked (i.e. event.target).
After the capture eventPhase the event chain reaches event.target (the button that was clicked) and the function ytCommand() is called on the player that corresponds to the button (see step 2.)
Working Demo
PLUNKER
Stopping YouTube Player
Access the iframe by using contentWindow method
Next cross-domain communication through an iframe is possible with the postMessage API.
Next post commands from YouTube iFrame API
Relevant Code
$('#stop').on('click', function() {
$('#ytPlayer')[0].contentWindow.postMessage('{"event":"command","func":"' + 'stopVideo' + '","args":""}', '*');
});
Working Demo
FIDDLE
Snippet
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Stop YTPlayer</title>
</head>
<body>
<section id="videoChannels">
<div>
<iframe id="yt0" class="player" src="https://www.youtube.com/embed/8IzxdjVr5ZI?enablejsapi=1" frameborder="0" allowfullscreen></iframe>
<button class='stop' data-id='yt0'>STOP</button>
</div>
<div>
<iframe id="yt1" class="player" src="https://www.youtube.com/embed/AhenpCh6BO4?enablejsapi=1" frameborder="0" allowfullscreen></iframe>
<button class='stop' data-id='yt1'>STOP</button>
</div>
<div>
<iframe id="yt2" class="player" src="https://www.youtube.com/embed/HrmF-mPLybw?enablejsapi=1" frameborder="0" allowfullscreen></iframe>
<button class='stop' data-id='yt2'>STOP</button>
</div>
<div>
<iframe id="yt3" class="player" src="https://www.youtube.com/embed/6KouSwLP_2o?enablejsapi=1" frameborder="0" allowfullscreen></iframe>
<button class='stop' data-id='yt3'>STOP</button>
</div>
</section>
<script>
var vidCh = document.getElementById('videoChannels');
vidCh.addEventListener('click', ytCommand, false);
function ytCommand(event) {
if (event.target != event.currentTarget) {
var btn = event.target.getAttribute('data-id');
var ytp = document.getElementById(btn);
ytp.contentWindow.postMessage('{"event":"command","func":"' + 'stopVideo' + '","args":""}', '*');
}
}
</script>
</body>
</html>
I want to make 4 channel in my website, but I want to make start for the first channel automatically and after 5 second start the second channel ... etc
code of channel
The Code
window.addEventListener("load", function() {
var interval = setInterval(function() {
iframes[++n].src = urls[n - 1];
iframe[n].style.display = "block";
console.log(n);
if (n === iframes.length -1)
{
clearInterval(interval); console.log("all iframes loaded")
}
},
5000)
})
.channel1, .channel2, .channel3{
display:none;
}
<html>
<head>
<script type="text/javascript" src="js.js"></script>
<link rel="stylesheet" href="css.css">
</head>
<body>
<iframe width="560" height="315" src="https://www.youtube.com/embed/BqPmcSGgs3U?autoplay=1" frameborder="0" allowfullscreen></iframe>
<iframe class="channel1" width="560" height="315" src="https://www.youtube.com/embed/BqPmcSGgs3U?autoplay=1" frameborder="0" allowfullscreen></iframe>
<iframe class="channel2" width="560" height="315" src="https://www.youtube.com/embed/BqPmcSGgs3U" frameborder="0" allowfullscreen></iframe>
<iframe class="channel3" width="560" height="315" src="https://www.youtube.com/embed/BqPmcSGgs3U" frameborder="0" allowfullscreen></iframe>
</body>
</html>
This code doesn't work, I can listen the commutator talk but I cant see the channel why ?
You can set iframe elements 1-4 src to empty string, utilize setInterval to set src of each iframe 1-4 to a url within an array every five seconds until all iframe elements have src set.
window.addEventListener("load", function() {
var urls = ["data:text/plain,b", "data:text/plain,c", "data:text/plain,d"];
var iframes = document.querySelectorAll("iframe");
var n = 0;
var interval = setInterval(function() {
iframes[++n].src = urls[n - 1];
console.log(n);
if (n === iframes.length -1) {
clearInterval(interval);
console.log("all iframes loaded")
}
}, 5000)
})
<iframe src="data:text/plain,a"></iframe>
<iframe src=""></iframe>
<iframe src=""></iframe>
<iframe src=""></iframe>
I have two iframes in my web page, and I want to load the second iframe after the first iframe has finished loading. How can I do this? I tried using the settimeout function, but I encountered some problems.
This is my code:
<iframe src="firstiframe" frameborder="0" widht="100%" marginheight="0" marginwidth="0" scrolling="NO" id="the_iframe">
</iframe>
<iframe src="secondframe" frameborder="0" widht="100%" marginheight="0" marginwidth="0" scrolling="NO" id="the_iframe2" >
</iframe>
<script>
function resizeIframe(iframeID)
{
document.setTimeout("resizeIframe",1000);
var iframe = window.parent.document.getElementById(iframeID);
var container = document.getElementById('content');
iframe.style.height = container.offsetHeight + 'px';
}
</script>
You can use the jQuery ready function on the frame to see when it's loaded and then set the src url for the second frame. Something like:
$('#firstframe').ready(function() {
$('#secondframe').attr('src', 'http://yourlink');
});
You can do something like this:
$("#firstIframe").load(function (){
$("#secondIframe").load();
});
I would do this with jquery:
First iframe:
<iframe id="iframe1"></iframe>
<div id="loadsecondIframeHere"></div>
<script>
$('#iframe1').ready(function(){
$('#loadsecondIframeHere').html('<iframe id="iframe2"></iframe');
});
</script>
or use $(document).ready()