if ("I am on this html page") {play this music};
Are there any commands to make this possible using Javascript?
this code worked for me :)
var soundEfx2 = document.getElementById("soundEfx2");
var soundMain = "Music/Main.mp3";
if(window.location.href.split('/').pop() == "Game2.html") {
soundEfx2.src = soundMain;
soundEfx2.play();
soundEfx2.loop = true;
}
Let's say that your URL is http://foo.com/bar.html.
With window.location.href you're getting the whole URL (http://foo.com/bar.html), but you only need to get the last URL segment (bar.html) of that URL, so use:
if(window.location.href.split('/').pop() == "Game2.html"){
// rest of code
}
if(window.location.href=='THIS_URL'){
//play the song
}
you can play it via jquery by getting the player id and calling the appropriate function and you can render the player by opening the php tags and echoing the PLAYER code.
Related
I have an embedded playlist of video links from different websites like Dailymotion, YouTube, Vimeo, etc., that I would like to play back to back on a personal website that I am working on. I found a script on the internet that plays embedded videos from multiple websites, but it only plays one video randomly. I would like the script to play each video back to back once one video is finished playing, but since I have no skills whatsoever in javascript, I don't know how to adapt this script to meet my needs. Does anyone know how I can accomplish this? I would greatly appreciate any kind of help. Thanks! Here is the script:
<div id="random_player"></div>
<script>
var videos = ["https://www.dailymotion.com/embed/video/x7raxfh?queue-enable=false","https://ok.ru/videoembed/3188453542586","https://www.youtube.com/embed/X3wV5ydVewY" ];
window.onload = function () {
var playerDiv = document.getElementById("random_player");
var player = document.createElement("IFRAME");
var randomVideoUrl = videos[Math.floor(Math.random() * videos.length)];
player.setAttribute('width', '640');
player.setAttribute('height', '390');
player.setAttribute('src', randomVideoUrl);
playerDiv.appendChild(player);
};
</script>
Follow the step by step code below-
Step 1
Copy paste the below code in html file by replacing url to your desired one!-
<iframe src="url" id="videoPlayer" height="200"">
Step 2
Javascript file should look like this-
let videoSource = new Array();
videoSource[0] = 'https://www.dailymotion.com/embed/video/x7raxfh?queue-enable=false","https://ok.ru/videoembed/3188453542586';
videoSource[1] = 'https://www.youtube.com/embed/X3wV5ydVewY4';
let i = 0; // global
const videoCount = videoSource.length;
const element = document.getElementById("videoPlayer");
function videoPlay(videoNum) {
element.setAttribute("src", videoSource[videoNum]);
element.autoplay = true;
element.load();
element.play();
}
document.getElementById('videoPlayer').addEventListener('ended', myHandler, false);
videoPlay(0); // play the video
function myHandler() {
i++;
if (i == videoCount) {
i = 0;
videoPlay(i);
} else {
videoPlay(i);
}
}
Step 3
Save the file and call the javascript file on html file. Open the html file in browser and it will run according to your asked question!
So I'm fiddling with a fun idea for an offline website I'm currently trying to develop.
It'll be offline as it's meant to be practice for later study assignments and such.
My problem is the following: I have a javascript function that replaces a PNG with a GIF and after the animation it should redirect the person to another html I've made.
The source for the JS animation is mainly acquired from here already, but I cannot seem to make it work in the ways I originally intended.
The way it currently works is that I click the png and it'll turn into a gif (no problem there) but what I want is that it runs my js script and then redirect to another .html file (url).
The following is my HTML:
<object id="syringe">
<img src="img/syringe.png" height="750" alt="img/syringe.gif" class="center">
<h2>Click the syringe to inject yourself with a daily dose of puns and jokes</h2>
</object>
The following is the JS:
(function($) {
var getGif = function() {
var gif = [];
$('img').each(function() {
var data = $(this).data('alt');
gif.push(data);
});
return gif;
}
var gif = getGif();
var image = [];
$.each(gif, function(index) {
image[index] = new Image();
image[index].src = gif[index];
});
$('#syringe').on('click', function() {
var $this = $(this),
$index = $this.index(),
$img = $this.children('img'),
$imgSrc = $img.attr('src'),
$imgAlt = $img.attr('data-alt'),
$imgExt = $imgAlt.split('.');
if($imgExt[1] === 'gif') {
$img.attr('src', $img.data('alt')).attr('data-alt', $imgSrc);
} else {
$img.attr('src', $imgAlt).attr('data-alt', $img.data('alt'));
}
$this.toggleClass('play');
});
})(jQuery);
It is to my understanding that I can add a delay and then another function to something in the js - such as the following, which is what I intend to do, however cannot accomplish.
[FUNCTION HERE],1000,
function(){
window.location.href=myredirectionuri;
});
And that is my problem.
It looks like you want to have the gif display for a second or two and then redirect, right? If $this.toggleClass('play'); is the end, then just insert this right after it:
setTimeout(() => window.location.href = myredirectionuri, 1000);
That'll wait for 1000ms and then redirect to the new page.
In the animation script, after it changes to a gif, insert
setTimeout(function() {
/* redirect code */
}, /* length of gif in milliseconds */ )
I need an image to be displayed based on the ending of a URL.
For example, I need "123.jpg" to be displayed when someone visits:
website.com/view/#123
website.com/view/#123.jpg
website.com/view#123
website.com/view#123.jpg
(whichever is recommended or would actually work)
I'm looking for the end result to be: < img src=123.jpg" >
Thanks in advance. I will sincerely appreciate any assistance.
(By way of background or additional information, I need this for Facebook's sharer.php so that people can share one of hundreds of images on a given webpage (for example, website.com/blog and they happen to love the 123rd image on there), they click the link to share that specific image (123.jpg), and then any of their friends who clicks on the link (website.com/view/#123) will arrive at a themed page with just the image in the middle (123.jpg) and nothing else, and then they can click around the rest of the website. The main benefit is that 123.jpg will be the only image that shows up as a thumbnail on the Facebook Feed or "Wall".)
window.onhashchange = function() {
if (location.hash) {
var url = location.hash.substr(1); // strip the # char
if (url.indexOf('.') == -1) {
url += '.jpg';
}
document.getElementById('myImg').src = url; // show the image; value of the variable 'url'
}
};
window.onhashchange(); // call the event on load
Use something like this.
$(document).ready(function(){
var url = document.URL; //get the url
if ( url.indexOf("#") != -1 ) //check if '#' is present in the url
{
var split_array = url.split("#");
var image_url = split_array[split_array.length - 1];
//display the image
}
});
Try this out,
$(document).ready(function() {
getImageSrc();
$(window).on('hashchange', getImageSrc); // will always lookout for changes in # URL
});
function getImageSrc() {
if(window.location.hash) {
var imgSrc = window.location.hash.substr(1);
if(imgSrc.indexOf('.') == -1 ) {
imgSrc = imgSrc + ".jpg";
}
alert(imgSrc);
}
}
I have an external JS file with inside this code:
var mobile_number_param = document.getElementById('mobile_number_param');
mobile_number_param.maxLength = 9;
mobile_number_param.readOnly = true;
var email = document.getElementById('email');
email.readOnly = true;
var user_notes = document.getElementById('user_notes');
user_notes.maxLength = 90;
var admin_notes = document.getElementById('admin_notes');
admin_notes.maxLength = 90;
Now my goal is to apply the code related to "mobile_number_param" but ONLY when I'm on the "reserve.php" page otherwise I'm not allowed to modify my Mobile Phone number in other area such my profile page.
Somebody told me this:
You can recognize the current url by checking window.location.href and e.g. searching for reserve.php to know you're on the reservation page..then apply your code.
Unfortunately I'm not a coder and don't have any idea how to do.
Any suggestions ? Thank for your time...
if (window.location.href.indexOf('reserve.php') != -1) {
// do stuff for reserve.php page here
}
Just add the following function in your external JS File:
function myFunction(pagename) {
var pageurl = window.location.href;
var pg = pageurl.split("/"); /*SPLITS THE URL ACCORDING TO DELIMINATOR "/". Eg x/y/z/reserve.php pg[0]=x,..pg[3]=reserve.php*/
var pgname = (pg[pg.length - 1]);
if (pagename == pgname) /*check whether the current page is reserve.php or not*/
{
return true;
}
return false;
}
Calling the Function:
if (myFunction("reserve.php")) {
/*Yes reserve.php page*/
} else {
/*Not reserve.php page*/
}
Server sided you could read the HTTP referer field.
If it contains reserve.php include the one js else an other js.
If you prefer to use only one js you could wrap the fucionality into a function.
called from reserve.php with parameter 1, from other pages parameter 0
or else.
Was not sure what to title this post, I've been having a go at trying to make a little Windows 8 app, I don't have much knowledge and sorry in advance if this is hard to understand, below is my itemDetail.js
(function () {
"use strict";
WinJS.UI.Pages.define("/pages/itemDetail/itemDetail.html", {
// This function is called whenever a user navigates to this page. It
// populates the page elements with the app's data.
ready: function (element, options) {
var item = options && options.item ? Data.resolveItemReference(options.item) : Data.items.getAt(0);
element.querySelector(".titlearea .pagetitle").textContent = item.group.title;
element.querySelector("article .item-title").textContent = item.title;
element.querySelector("article .item-subtitle").textContent = item.subtitle;
element.querySelector("article .item-image").src = item.backgroundImage;
element.querySelector("article .item-image").alt = item.subtitle;
element.querySelector("article .item-content").innerHTML = item.content;
element.querySelector("article .track1").innerHTML = item.track1;
WinJS.Utilities.query("#playMP3").listen("click", getStartVideoFuntion("http://www.ikkmusic.com/ikkmusic.com%20mix.mp3"));
},
});
function getStartVideoFuntion(src) {
return function () {
// Set video element's source
var vid = WinJS.Utilities.query("#playback")[0];
vid.src = src;
vid.play();
};
}})();
So I have a file called data.js which has all the sample data in, and I'm getting the info here and displaying it and it works fine, but my problem is with the bottom one (below) where the url is shown, when the button is pressed it plays the url in the html5 player tag, this works, is there a way for me to put the contents of item.track1 where the URL is now, I can't get it to put the contents of the data there.
WinJS.Utilities.query("#playMP3").listen("click", getStartVideoFuntion("http://www.ikkmusic.com/ikkmusic.com%20mix.mp3"));
WinJS.Utilities.query("#playMP3").listen("click", getStartVideoFuntion(item.track1));