Sample i have two link google.com and youtube.com.
I want to show interface web each 30 seconds in one screen board web page (it's mean in screen board, first show web page google.com, then after 30 seconds, it'll show web page youtube.com, and repeat). Can i use javascript or jquery ?
<html>
<body>
<!-- Show page google.com-->
<!-- Show page youtube.com-->
</body>
</html>
I'm not sure that showing iFrames for Google and YouTube is a good idea, unless you embed a specific video, YouTube will squawk about same-origin issues, same is true for Google.
However aside from the sites your linking, to actually achieve what you are asking (if I have understood the question correctly) I would do this:
var counter = $('#counter');
var count = $(counter).html();
var origCount = count
function tick(){
count--
$(counter).html(count)
if (count == 0 ) {
toggleIframe()
count = origCount
}
}
function toggleIframe(){
$('iframe').toggle();
}
setInterval(tick, 1000);
iframe{
border:5px solid #333;
}
#counter{
font-size:30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="counter">10</div>
<div id="iframeContainer">
<iframe width="560" height="315" src="https://laravel.com/"></iframe>
<iframe width="560" height="315" src="https://vuejs.org/" frameborder="0" style="display:none;"></iframe>
</div>
based on your comment I have added another answer, this has more comments so hopefully easy to understand.
This version is dynamic, so you can just add more iframes to the list and they will get added into the cycle.
// This is just to display a counter for demo purposes, you can remove this
var counter = $('#counter');
// Set the count of seconds for each iframe to display
var seconds = 5
// this is the current tick, so will count down to 0 then reset to the seconds variable value.
var tick = seconds;
// count the number of iframes on the page.
var iframesCount = $('#iframeContainer').find('.iframe').length;
// hold the current frame to show.
var currentIframe = 0;
// main function that will be run every second (1000 ms)
function run(){
// decrement the tick by 1
tick--
// update the tick counter on screen (just for demo purposes, you can remove this)
$('#counter').html(tick)
// if tick is at 0 we need to switch the frame to the next one.
if (tick === 0 ) {
// switch frame to the next frame in the list.
nextIframe();
// reset the tick back to its original value
tick = seconds;
}
}
function nextIframe(){
// check if the current frame is the last one in the list
if (currentIframe === iframesCount - 1){
// If it is the last in the list, set the current frame to 0 so we begin back at the first frame
currentIframe = 0;
}
else {
// if the current frame is not the last in the list, then increment the current frame by 1
currentIframe++
}
// run the toggleFrame function to show/hide the respective frames
toggleIframe();
}
function toggleIframe(){
// hide all the frames
$('.iframe').hide();
// show only the frame that matches current frame
var frame = $('.iframe')[currentIframe]
$(frame).show();
}
// kick off the main "run" function every 1000 ms (1 second)
setInterval(run, 1000);
iframe{
border:5px solid #555;
display:none;
}
iframe:nth-child(1){
display:block;
}
#counter{
font-size:30px;
}
<div id="iframeContainer">
<iframe class="iframe" width="560" height="315" src="https://laravel.com/"></iframe>
<iframe class="iframe" width="560" height="315" src="https://vuejs.org/"></iframe>
<iframe class="iframe" width="560" height="315" src="https://vuejs.org/v2/guide/"></iframe>
<iframe class="iframe" width="560" height="315" src="https://vuejs.org/v2/api/"></iframe>
<!-- Try to uncomment the below iframe and it should automatically get included in the cycle -->
<!--<iframe class="iframe" width="560" height="315" src="https://vuejs.org/v2/style-guide/"></iframe>-->
</div>
<!-- You can delete the below, its just for demo -->
<div id="counter"></div>
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
Related
I'm trying to make a video player with several features by js html and css, but when I came to trying to preload the video, I couldn't find a way to know how much of the video was downloaded, and I need to know this info so I can update a progress bar to tell how much data has been buffered.
Is there a way to find out how much a video has been buffered?
I tried accessing the video preload property in javascript to get how much it was preloaded . but it gave me the preload type of the video
You need to use: TimeRanges to know the length of loaded (buffered) video.
There will be more time ranges added if you seek into a new area that has not yet buffered. Either handle such situation or else code your UI to not respond if a user clicks outside the fill area (eg: only clicking within fill area will change currentTime of video).
Also read: Media buffering, seeking, and time ranges guide for more knowledge.
Below is some testable code as a starting point to expand:
<!DOCTYPE html>
<html>
<body>
<video id="myVid" width="320" height="240" controls>
<source src="your_file.mp4" type="video/mp4">
</video>
<br><br>
<div id="myProgress_BG" style="width: 320px; height: 30px; background-color: #808080">
<div id="myProgress_Bar" style=" width: 1%; height: 30px; background-color: #00A0E6" ></div>
</div>
</body>
<script>
let timeLoaded = 0; let timeTotal = 0;
//# access the "fill" (blue) bar
let prog_Bar = document.getElementById('myProgress_Bar');
//# get the max width for the "fill" (is same as BG width)
let prog_Max = document.getElementById('myProgress_BG').style.width;
prog_Max = parseInt(prog_Max);
//# set a listener for the "progress" event
let vid = document.getElementById('myVid');
vid.addEventListener('progress', (event) => { myProgressFunc() });
function myProgressFunc()
{
//# update times (duration and buffered)
if( timeTotal == 0 ) { timeTotal = vid.duration; }
timeLoaded = vid.buffered.end(0);
//# update width via CSS Styles (numbers need a +"px" to work)
prog_Bar.style.width = ( prog_Max / ( timeTotal / timeLoaded) ) +"px";
}
</script>
</html>
I wrote this code a while back, and it allowed users to click and refresh the page to autoplay a RANDOM background video with sound.
This is the function that they click that loads the function
https://pastebin.com/0XXEHvQQ
<div align="center">
<p><font face="verdana" size="2">
<a onclick="ok()"> press me PLAY VIDS :)</a></font></p>
</div>
https://pastebin.com/PD5qdNDM
<div align="center">
<p><font face="verdana" size="2">
<a onclick="ok()"> -> press me to fix the site :) <-</a></font></p>
</div>
</div>
</div>
</div>
<!-- Scripts -->
<script src="js/parallax.js"></script>
<script>
// Pretty simple huh?
var scene = document.getElementById('scene');
var parallax = new Parallax(scene);
</script>
</script>
<script src="js/custom.js"></script>
<script>
let volumeInterval;
function loaded(){
setInterval(loop, 600);
volumeInterval = setInterval(volume, 1);
}
function unload(){
for (var i = 1; i < 99999; i++)
window.clearInterval(i);
console.log("unloaded");
}
function volume() {
try {
document.getElementsByTagName("video")[0].volume = 0.15;
console.log("done!");
clearInterval(volumeInterval);
}
catch (e) {
console.log("waiting..");
}
}
function ok() {
document.write(unescape(
and heres the unescaped code
https://pastebin.com/YJwbG2mC
<!-- VIDEO GRABBB -->
<video preload="auto" autoplay="true" loop="true">
<source id="player" src="5.mp4">
<script>
var video = document.currentScript.parentElement;
video.volume = 0.33;
//document.getElementById('player').currentTime = 20;
</script>
<script>
var video = document.getElementById("player");
video.addEventListener("timeupdate", function(){
if(this.currentTime >= 1000) {
location.reload();
}
});
</script>
<script type="text/javascript">
var video = document.getElementsByTagName('video')[0];
video.onended = function() {
location.reload();
};
</script>
<script>
document.getElementById("player").src = "/" + Math.floor((Math.random()*7)+1) + ".mp4";
</script>
</video>
No matter how I try to adjust the unescaped code, I can't get the MP4 to autoplay after clicking the function.
Here is my live site that I no longer can access: form.wtf
According to the HTML Spec on the Source Element,
Dynamically modifying a source element and its attribute when the element is already inserted in a video or audio element will have no effect. To change what is playing, just use the src attribute on the media element directly, possibly making use of the canPlayType() method to pick from amongst available resources. Generally, manipulating source elements manually after the document has been parsed is an unnecessarily complicated approach.
Therefore, no matter what you do to the source element, you can't change the video unless the new src is applied directly to the video element.
Replacing the source element also has no effect on the video that plays. The source element's src attribute may changed but the video will keep on playing.
Therefore, you should leave your source's src attribute empty until the JavaScript code sets it or
Leave out the source tag all together and apply the src straight to the video.
Math.floor(Math.random() * 7 + 1); is exactly the same thing as Math.ceil(Math.random() * 7);
document.querySelector('#player > source').src = `/${Math.ceil(Math.random() * 7)}.mp4`;
<video id="player" preload="auto" autoplay loop>
<source src="">
</video>
Hi I am trying to get a button to appear beneath my video after 30 mins and 30 seconds. When I contacted Wistia support they gave me this link and told me they were not coders and couldn't help me further. I don't know anything about javascript and I do know a bit of CSS. I read a post on another website here and copied it to my site hoping that it would work. I added the javascript code beneath the inline embed of my video, and then put the CSS in the customize additional css editor in wordpress.
When I did it part of it worked and the button I had there disappeared, but when I tried to trigger it at the 30min 30sec mark it never appeared and I haven't been able to get it to appear at all. Here is a link to the page for you to view it and below is the code that I have used to embed the video as well as the css to hide the button. Any help would be greatly apprecited as I am very new to this.
Here is the code I used on the video embed:
<script src="https://fast.wistia.com/embed/medias/c5khj4dcbi.jsonp" async></script><script src="https://fast.wistia.com/assets/external/E-v1.js" async></script><div class="wistia_responsive_padding" style="padding:56.25% 0 0 0;position:relative;"><div class="wistia_responsive_wrapper" style="height:100%;left:0;position:absolute;top:0;width:100%;"><div class="wistia_embed wistia_async_c5khj4dcbi videoFoam=true" style="height:100%;position:relative;width:100%"><div class="wistia_swatch" style="height:100%;left:0;opacity:0;overflow:hidden;position:absolute;top:0;transition:opacity 200ms;width:100%;"><img src="https://fast.wistia.com/embed/medias/c5khj4dcbi/swatch" style="filter:blur(5px);height:100%;object-fit:contain;width:100%;" alt="" aria-hidden="true" onload="this.parentNode.style.opacity=1;" /></div></div></div></div>
<script>
window._wq = window._wq || [];
// target our video by the first 3 characters of the hashed ID
_wq.push({ id: "c5khj4dcbi", onReady: function(video) {
// at 1830 seconds (30.5min x 60 = 1830), do something amazing
video.bind('secondchange', function(s) {
if (s === 1830) {
// Insert code to do something amazing here
// console.log("We just reached " + s + " seconds!");
$( "#mybutton" ).addClass( "ShowMeButton" );
}
});
}});
</script>
And here is the CSS I used on the wordpress editor customize > additional CSS:
.page-id-741 #mybutton {
opacity: 0;
}
.ShowMeButton {
opacity: 1;
filter:alpha(opacity=100);
}
I'm assuming you're skipping through the video to hit the point where the script runs.
Using the Wistia .secondsPlaying() function, it only shows the actual number of seconds the user has played the video for.
The function you're looking for is .time(), which outputs the actual location of the user in the video, in seconds.
Try this:
<script>
var videoTrigger = false;
window._wq = window._wq || [];
_wq.push({ id: 'xxxxxxxx', onReady: function(video) {
video.bind("secondchange", function() {
if (video.time() >= 1830 && videoTrigger !== true) {
videoTrigger = true;
console.log("Run code here");
}
});
}});
</script>
Note that this code will also activate if the user skips past the activation point (as it uses >= and a variable instead of just ===).
I'm having a problem with HTML Video and JavaScript so have written some simple code to demonstrate. There is one video which contains three "clips" all five seconds long (obviously, real-world, they are a lot longer). One at 25 - 30 seconds, one at 55 - 60 seconds and the last at 85 - 90 seconds. I want the user to be able to click the relevant button for each five second clip.
There are two issues:
The Chrome currenttimer() bug which doesn't seem to let you change the start time of an external video (The video will be stored on an Azure Blob). There appear to be a number of posts on this but no fix.
When you play the first clip and then try and play the second clip, because the start time of clip 2 is after the end time for clip 1, it doesn't play because the AddEventListener is still in effect. Is there a way to drop the original EventListener or replace it with the new end time?
Here is the code being used:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div style="width: 700px; height: 400px; margin: auto; text-align: center;">
<video id="video1" width="620" controls>
<source type="video/mp4" src="external video link here" />
Your browser does not support HTML5 video.
</video>
<input type="button" value="Play Clip 1 (25 - 30 seconds" onclick="javascript: showvid(25);" /><br />
<input type="button" value="Play Clip 2 (55 - 60 seconds" onclick="javascript: showvid(55);" /><br />
<input type="button" value="Play Clip 3 (85 - 90 seconds" onclick="javascript: showvid(85);" /><br />
</div>
<script type="text/javascript">
function showvid(timer) {
var myVideo = document.getElementById("video1");
myVideo.currentTime = timer;
myVideo.play();
myVideo.addEventListener("timeupdate", function () {
if (this.currentTime >= (timer + 5)) {
this.pause();
}
});
}
</script>
</body>
</html>
UPDATE 1
I've changed the event listener check to pause the video only if the currenttime is within a second of the end time. SO if the next clip is more than a second away, they listener won't stop the clip before it starts.
Still looking into the Chrome issue.
I don't know what Chrome bug you are talking about, but for cleaner code, you might be interested in the #t=start[,end] Media Fragment, which will allow you to set a time range directly as the source of your <video>:
onclick =e=> {
const data = e.target.dataset;
if(!data.start) return;
vid.src = vid.src.split('#')[0] +
'#t=' + data.start + ',' + data.end;
// url.vid#t=start,end
vid.play();
}
<button data-start="5" data-end="10">play [5,10]</button>
<button data-start="35" data-end="40">play [35,40]</button>
<button data-start="00:01:25" data-end="00:01:30">play [00:01:25,00:01:30]</button>
<video id="vid" src="https://upload.wikimedia.org/wikipedia/commons/transcoded/2/22/Volcano_Lava_Sample.webm/Volcano_Lava_Sample.webm.360p.webm" muted></video>
Now if you really wish to go the way you were going, then you'll have change your code a bit.
Never add a new event listener from an user-generated event.
Add it once, and only trigger semaphores / update variables from user events.
So we first add the timeupdate event on our <video>, then if no user generated event did happen, we exit early. Otherwise, we check for a variable that is accessible to both our event listeners (here called next_stop) if we should pause or not.
Then, in the buttons event listeners, we update the <video>'scurrentTime, request it to play and update next_stop.
The two event listeners can interact thanks to the shared next_stop variable, but no more conflicts.
let next_stop = Infinity; // a variable shared by both event listeners
// add the event listeners only once
vid.addEventListener('timeupdate', handleTimeupdate, {passive: true});
document.addEventListener('click', handleClick);
function handleTimeupdate(evt) {
// not set? exit early
if(!isFinite(next_stop)) return;
// a single action
if(this.currentTime > next_stop) {
this.pause();
// if you want to disable the range once it's done
// e.g to allow default controls interactions
// next_stop = Infinity;
}
}
function handleClick(evt) {
const times = parseTime(evt.target);
if(!times) return;
// update the video's current time
vid.currentTime = times.start;
// update the shared variable
next_stop = times.end;
// start playing if needed
if(vid.paused) {
vid.play();
}
}
function parseTime(target) {
const data = target.dataset;
if(!data || !data.start) return null;
return {start: +data.start, end: +data.end};
}
<button data-start="5" data-end="10">play [5,10]</button>
<button data-start="35" data-end="40">play [35,40]</button>
<button data-start="85" data-end="90">play [00:01:25,00:01:30]</button>
<video id="vid" src="https://upload.wikimedia.org/wikipedia/commons/transcoded/2/22/Volcano_Lava_Sample.webm/Volcano_Lava_Sample.webm.360p.webm" controls></video>
Trying to get images to refresh themselves with javascript a set number of times, then stop (to avoid large cache generation). This code won't function though, so not sure what's missing?
<script>
var c = 0;
function fnSetTimer()
{
document.getElementById('refreshimage1').src='http://68.116.42.142:8080/cam_4.jpg?\'+new Date().getMilliseconds();
var t = setTimeout(fnSetTimer,5000);
c=c+1;
if(c>5)
clearTimeout(t);
}
</script>
<img src="http://68.116.42.142:8080/cam_4.jpg"; id="refreshimage1" onload="fnSetTimer()" width="400" />
However, this code does work:
<img src="http://68.116.42.142:8080/cam_4.jpg"; id="refreshimage2" onload="setTimeout('document.getElementById(\'refreshimage2\').src=\'http://68.116.42.142:8080/cam_4.jpg?\'+new Date().getMilliseconds()', 5000)" width="400" />
So if you place both side by side, the bottom image will refresh (indefinitely), but the top image just loads once and never refreshes. Any thoughts what I missed in the top code?
The problem is that the function re-loads the image, which calls the function, which re-loads the image...
You also had a problem with the image url - '\' is used to escape special characters, if you want a slash you need two - '\\'
PUT THIS IN YOUR HEADER
<script language="javascript">
function fnSetTimer(image, src, counter, limit)
{
image.onload = null;
if(counter < limit)
{
counter++;
setTimeout(function(){ fnSetTimer(image, src, counter, limit); },5000);
image.src= src+ '?\\'+new Date().getMilliseconds();
alert(counter); // show frame number
}
}
</script>
PUT THIS IN THE BODY
<img src="http://68.116.42.142:8080/cam_4.jpg"; id="refreshimage1" onload="fnSetTimer(this, this.src, 0, 5);" width="400" />
This should fix it for you - it only fires onLoad once and then loops through 5 times, and you should be able to edit the image tag in Wordpress, etc.
MAKE SURE YOU GIVE EACH IMAGE A DIFFERENT ID