I've made a site that randomizes HTML videos or images just to practice my javascript.
I am trying to make it so that each time a video is randomized the URL location will change to represent the new video, this way users would be able to link directly to a video that was randomized.
Currently it only displays a static url that does not change whenever content is loaded.
Here is the obligatory codepen
Codepen
function chooseRandomVideoFromList() {
var i = Math.floor(Math.random() * currentList.length);
var video = currentList[i];
var $video = $('video');
// clear
$video.html('');
// <source src="" type="">
video.sources.forEach(function (source) {
var $source = $('<source>').attr('type', source.type).attr('src', source.src);
$video.append($source);
});
Any help or advice would be greatly appreciated, i've read the documentation and I am still stumped :S
Thanks guys!
You cannot directly write on the window.location.href property, but you may change your sites url with the html5 history api and pushstate.
Example:
history.pushState({}, "Stackoverflow", "http://stackoverflow.com");
This should work in all modern browsers, see: http://caniuse.com/#search=pushstate
More information on this topic could be found here: https://developer.mozilla.org/de/docs/Web/Guide/DOM/Manipulating_the_browser_history
Though keep in mind you need also to listen on popstate events if you want the users to be able to use their browsers back and forward buttons. Also your server side code needs to handle the urls.
If you need to support older browsers or don't want the server side to be involved you could set the window.location.hash property instead which does not change the url itself but let you change the hash part of the current url, for example:
window.location.hash = "uri=stackoverflow.com";
This way you might store the Index of the video currently shown. When loading the page you might want to check if there's a value in "window.location.hash" and if it is a valid index for your videoFiles. If so you should play that video.
Example (insert in your starting code):
if (window.location.hash !== "") {
showSpecificVideoFromList(window.location.hash);
}
And this one in your chooseRandomVideoFromList:
window.location.hash=i;
Then implement your showSpecificVideoFromList in order to show the given index (and check for validity)
Related
I am having difficulty capturing HD video with the Ziggeo Recorder.
I have set up a Recorder, basically, it’s a clone of Ziggeo's hosted solution:
<script>
$(document).ready( function() {
//assigning the event handler for click on the Next button on first screen
$("#step1 button").on("click", function() {
//hide first screen
$("#step1").hide();
//show second screen
$("#step2").show();
//add our embedding to the page
var recorder = new ZiggeoApi.V2.Recorder({
//we find the element with id="recorder" to attach v2 recorder to it
element: document.getElementById("recorder"),
attrs: {
//we make the recorder responsive
responsive: true,
//we set the max time for recording to 120 seconds
timelimit: 2 * 60,
theme: "modern",
video_width: 1920,
video_height: 1080,
video_profile_transcoding: "HDcapture",
hd: true,
//we add name and email to the video as a custom data
"custom-data": {
name: $("#name").val(),
email: $("#email").val()
}
}
});
//we activate the recorder
recorder.activate();
recorder.on("verified", function() {
//once video is uploaded and seen that it can be processed the verified event fires we show the
// button to Submit the form
$("#step2 button").show();
});
});
//When Submit button is clicked
$("#step2 button").on("click", function() {
//hide second screen showing recorder
$("#step2").hide();
//show the "Thank you" screen
$("#step3").show();
});
});
</script>
I’ve tried the following in the attrs array with no avail.
video_width: 1920,
video_height: 1080,
video_profile_transcoding: "HDcapture",
hd: true,
I set up a video transcoding profile (and made it default), but it isn’t catching.
All videos are coming through at:
video_width: 640,
video_heigh: 480,
hd: false,
These Ziggeo support resources don’t seem to answer how to record HD (w/ v2 & JS)...
https://support.ziggeo.com/hc/en-us/articles/206452028-How-do-I-record-in-HD-
https://ziggeo.com/blog/record-video-in-hd/
And I don't see reference to HD anywhere here:
https://ziggeo.com/docs/api
Thanks in advance for any help or guidance. The promise of the Ziggeo product is awesome–I just need to get it to deliver HD!
It is awesome that you included the links and the codes Jon. Looking at them I can see why it is not working for you. My suggestion would be to check out the code from one of your links: https://support.ziggeo.com/hc/en-us/articles/206452028-How-do-I-record-in-HD-
This is the code currently shown there:
<ziggeorecorder
ziggeo-recordingwidth=1280
ziggeo-recordingheight=720
ziggeo-theme="modern"
ziggeo-themecolor="red"
ziggeo-video-profile="_name_of_your_hd_profile">
</ziggeorecorder>
The key parameters for recording HD videos would be setting recordingwidth and recordingheight to the values you wish to use. The default would be 640x480.
The HTML codes require ziggeo- prefix, while JavaScript one does not.
So changing the above example would result in the code that would look like so:
var recorder = new ZiggeoApi.V2.Recorder({
//we find the element with id="recorder" to attach v2 recorder to it
element: document.getElementById("recorder"),
attrs: {
theme: "modern",
recordingwidth: 1920,
recordingheight: 1080,
'video-profile': "_HDcapture"
}
});
I have removed most other parameters to show the most basic parameters you need to set.
Now, in the above code you can also notice that I used underscore before the video profile name resulting in _HDcapture. This is because the tokens (IDs generated by our system) are used without underscore, however if you made the ID, this is then a key (your unique ID) and to make our system aware that it is a key, it will look for the underscore. So if you do not put the underscore in your embedding, then it will just ignore it.
You can see "identifier: _HDcapture" shown to you when you create video profile in the dashboard helping you to know what exactly you should use.
Now looking at the parameters you have used, I believe that you used them from the video data then adding them to your embedding.
This video data is just showing you what you can expect in the JavaScript functions like recorder.get() or what would come in webhook. For actual parameters that you can use you should check out the docs here.
One thing to point out: You can only record 1080 if your camera supports 1080. If you use 720 then your camera has to support 720. Most cameras support 640x480 and is the reason why it is our default. I am saying this because:
You need the camera to be able to record in resolution you wish
You might want to also have alternative for people that do not have HD cameras
For anything JavaScript and HTML related, I would suggest checking out the docs here: https://ziggeo.com/docs/sdks/javascript/. Still do post here, or reach out to the support team of Ziggeo, either over email (support#ziggeo.com) or through forum: https://support.ziggeo.com/hc/en-us/community/topics
PS: I am part of the Ziggeo team, we all like to help, and I hope the above is helpful to you and anyone else looking for the same :)
Basically, there is a specific website I visit that I keep a userscript auto-refresh set on a timer. This specific page changes content every now and then upon being refreshed. I want a sound to be played whenever the page gets refreshed and any page changes occur.
Here's the code I've currently gathered, but I still need a few things to get it running properly:
// ==UserScript==
// #name Auto-Refresh
// #include https://www.prolific.ac/studies
// ==/UserScript==
//--- https://stackoverflow.com/questions/25484978/i-want-a-simple-greasemonkey-script-to-reload-the-page-every-minute
setTimeout(function(){ location.reload(); }, 20*1000);
var player = document.createElement('audio');
player.src = 'https://notificationsounds.com/soundfiles/a86c450b76fb8c371afead6410d55534/file-sounds-1108-slow-spring-board.mp3';
player.preload = 'auto';
// Play a sound with condition and then player.play()
So basically the rest of the script would be "if page change occurs (after refresh), then play sound." This is where I'm having trouble.
I've been using this thread as a guide: How to monitor a static HTML page for changes with Greasemonkey? Use a hash? But I'm not quite sure which method would work best. Any and all advice would be deeply appreciated. Thanks in advance.
In my experience you want to check for changes in specific elements, not the HTML of the entire page because there are often technical parts of the page that will change (timestamps, counters, random generated IDs, ads). So I have used jQuery to find the pieces which I then check for changes.
I guess you could check for changes in entire parts of page by doing something like this:
var player = document.createElement('audio');
player.src = 'https://notificationsounds.com/soundfiles/a86c450b76fb8c371afead6410d55534/file-sounds-1108-slow-spring-board.mp3';
player.preload = 'auto';
// First you store the content
var initialContent = $('.articles-section').html();
// Then next time you compare that content to the newly retrieved content
var newContent = $('.articles-section').html();
if (newContent !== initialContent) {
player.play();
}
You will have to use some kind of persistent storage, I guess you can use localStorage for that. See HTML5 Web Storage.
This part
var player = document.createElement('audio');
player.src = 'https://notificationsounds.com/soundfiles/a86c450b76fb8c371afead6410d55534/file-sounds-1108-slow-spring-board.mp3';
player.preload = 'auto';
only worked for me when I did
player.play() instead of player.preload = 'auto'
I have this function in javascript :
function loadPage (url){
showLoadPageGif(); // visibility On
document.location.href = getPath + "/" + url ;
}
When I use this function , GIF image is displayed in the screen but not working .
someone has fought before, with this problem ? thnx
i recently ran into this issue using animated SVGs as background-images in pseudo elements. I purposefully put in a large delay on my webserver so i could stay on the current page after window.location = url; It was weird that all other CSS animations and hovers still worked, but the SVG cog just stuck.
After some playing around i found that the animations continued to run if, instead of changing window.location, i submitted a GET form.
var url;
//load & setup loading animation
//then generate and submit form with a slight delay
setTimeout(function(){
var new_form;
new_form = document.createElement('form');
new_form.method = 'GET';
new_form.action = url;
document.body.appendChild(new_form);
new_form.submit();
}, 100)
tested on safari 5.1, firefox 24, chrome 32
I assume you mean "GIF animation stops".
This is the correct behavior. Since you go to a new page, all resources for the old page are freed. This of course includes the GIF itself.
You don't "see" this happening because the browser doesn't waste any time rendering a blank page when you assign location.href.
What you need to do is use an AJAX to request the new page and then replace the whole DOM with the new one in the success handler.
There is a bug in IE6 which stops the animations when you start an AJAX request; to fix that, just assign the src attribute of the image again (i.e. img.src = img.src;) to restart them.
Which browser you're using ? I needed to do the same one time if you're using IE just do this :
var loadingFigure = $('#myImage');
var html = loadingFigure.html();
window.location.href = 'myImage';
loadingFigure.html(html);
For firefox is more complicated you need to use an iframe and do something like this :
<iframe id="myIframe" src="/images/busy.gif" scrolling="no" frameborder="0"></iframe>
$('#myIframe').attr('src', '/images/busy.gif');
window.location.href = 'mylocation'
$('#myIframe').attr('src', '/images/busy.gif');
I have the following code:
document.getElementById("launcherDiv").innerHTML =
"<object id='launcher'
classid='CLSID:17E88883-3488-46B8-BE4D-30568888855'
codebase='Helper.CAB#version=8,8,8,88'>
</object>";
Let say the download/installing failed,
How can I know this? depending of it that I can't know how much time it supposed to take..
If I will check in a loop how can I know when to end?
previously I used to define the tag inside the HTML and it waiting until the installation finished or failed.
But now I need delay loading of this ActiveX so I can't use this
Can anyone help me?
If object tag is failed to load then it will render inner HTML between tag. For example
<object data="my/file/path.pdf">Object not supported</object>
If object fails then it will show inner text i.e. "Object not supported"
Maybe this helps:
var iv = setInterval(function () {
if (document.all["launcher"].readyState == 4) {
clearInterval(iv)
alert("Object loaded")
}
}, 100);
What it does is set an interval which checks the readystate every 100 seconds and if the object has loaded it alerts.
I know this is a old post but I was trying something like this my self.
In the object tag you can do something else inside it.
For example I was making a music site and If the custom player didnt load I wanted the audio tag to take over.
example:
<object>
<load customplayer> <!--==If this fails do the next line ==-->
<audio>
load song
</audio>
</object>
The only difference between the (first) anchor in an object that successfully loaded embedded content and the fallback content (first) anchor in an object that did not successfully load are the dimensions of the element. So all you have to do is determine your policy of the element you use for fallback (this is very likely an anchor element though some people might still support Flash as fallback content) and then target that element and get it's height in example; if the height is greater than 0 the object element did not successfully load.
var o = document.getElementsByTagName('object');
console.log(o[0].getElementsByTagName('a')[0].getBoundingClientRect().height);
I've got a page with links to MP3s, when the link is clicked I use javascript to show a small Flash player (NiftyPlayer) under the link. When a different link is clicked, the old player is hidden and the new player is revealed.
The player auto-starts when the element is shown, and auto-stops when hidden - in Firefox.
In IE it will only auto-start and NOT auto-stop. This is what I would like to solve.
This is an example HTML with link and player
Misunderstood What You Said
<div id="player662431" class="playerhide"><embed src="http://www.example.com/shop/flash/player.swf?file=/mp3/Beat The Radar - Misunderstood What You Said.mp3&as=1" quality="high" bgcolor="#000000" width="161" height="13" name="niftyPlayer662431" align="" type="application/x-shockwave-flash" swLiveConnect="true" pluginspage="http://www.macromedia.com/go/getflashplayer"></embed>
Here is the javascript (I've got jQuery installed to let me hide all the open players on this page apart from the new one)
function toggle_visibility(id) {
$('.playerhide').hide();
var e = document.getElementById(id);
e.style.display = 'block';
}
I think what I need to do is start the player manually with javascript (rather than using the autostart as=1 function in the URL string)
There is some javascript that comes with NiftyPlayer to allow this EG
niftyplayer('niftyPlayer1').play()
there is also a stop method.
I need some help with javascript - how do I add this call to play into my toggle_visibility function (it has the same unique ID number added to the name of the player as the ID of the div that's being shown, but I don't know how to pull this ID number out of one thing and put it in another)
I also would like to be able to do
niftyplayer('niftyPlayer1').stop()
to stop the audio of the previously running player. Is it possible to store the current ID number somewhere and call it back when needed?
Thanks for the help, i'm a PHP programmer who needs some support with Javascript - I know what I want to achieve, just don't know the commands to do it!
Thanks
If you assigned each niftyplayer object a classname, f.x. ".players", then you could loop through each player, like this:
function toggle_visibility(id) {
$(".players").each(function(){
playerId = $(this).attr('id');
if(niftyplayer(playerId).getState() == 'playing') {
//Stop the currently playing player
niftyplayer(playerId).stop();
//Hide the div that was playing
$("#" + playerId).hide();
}
});
//Start the new player
niftyplayer(id).play();
$("#" + id).show();
}
So what this actually does, is it loops through all the players on the website. It checks if the status of each player is equal to "playing", if it is, then it stops it and hides the div tags. Then it starts the new player and shows that div tag.
I think this does it. Try it out.
I have a much better solution after I noticed a very nasty bug / 'feature' when using Internet Explorer in conjunction.
I had noticed that in IE the pages were taking a very long time to load when I had a lot of hidden Nifty Players, I looked closer using Fiddler and found that each instance of NiftyPlayer was preloading the MP3 in full, rather than loading on demand as with Firefox and Chrome etc.
This meant that a page with 100 items (each item having up to 4 MP3s) took several minutes to load at times with obvious data transfer implications.
My solution which is rather simpler (but maybe clunkier) than Indyber's is to just use
function toggle_visibility(id,mp3location) {
// hide all players
$(".playerarea").html('');
// show clicked player
$('#' + id).html('<embed src=\"http://www.xxx.com/shop/flash/player.swf?file=http://www.xxx.com/mp3/' + decodeURIComponent(mp3location) + '.mp3&as=1\" quality=high bgcolor=#000000 WMODE=transparent width=\"161\" height=\"13\" align=\"\" type=\"application/x-shockwave-flash\" swLiveConnect=\"true\" pluginspage=\"http://www.macromedia.com/go/getflashplayer\" class=\"playerNew\">');
}
which works fine with IE, and also solves the problem of not being able to stop the players from playing in IE