This is what I got so far:
<audio id="player" src="../media/Click.mp3"></audio>
<div>
Home
</div>
Instead of playing the audio first and then going on to the page, it just goes to the next page. What do I need to change? If I change the a href to # instead of index.html it will play the audio.
I would personally put a delay on the hyperlink. For example, a 5 second delay - so that when the button is clicked, the audio would play (during the delay) and then take the person to the link specified.
For example:
<html>
<head>
<!-- This is where the delay is specified -->
<script>
function delay (URL) {
setTimeout( function() { window.location = URL }, 5000 );
}
</script>
</head>
<body>
<!-- This is where the audio file is specified -->
<audio id="player" src="../media/Click.mp3"></audio>
<!-- The hyperlink is specified via the javascript delay -->
<div>
Home
</div>
</body>
</html>
Please note: In the example above, the delay is set to 5 seconds (5000 milliseconds). This can be changed according to the amount of time you want the user to hear the audio. Also, in the href, change the /index.html to the destination page, but ensure that the URL is specified within the apostrophes, e.g. 'URL'.
Hope this helps.
Related
I think i am going crazy with this... there should be something that i am missing.
I have a html page that prints a lot of links in sequences... like this:
link1
link2
link3
...
The issue is that for some strange reasons when i click a link, the current page refresh while it's loading the content... and it's terribile because It needs to reload again all the links...
I have tried also this:
link1
but still whenever I click the current page it refreshes (while it is still loading) starting again from zero
I am using chrome latest version on win 10
Any clues? What else could i do to avoid refreshing the current page ?
The only woraround i found is to intercept the closing with the message box:
<script type="text/javascript">
window.onbeforeunload = function() {
return false;
}
</script>
use preventDefault() method
function openBlankPage(event,href) {
event.preventDefault();
alert('Opening the link')
window.open(href,'_blank');
}
<!DOCTYPE html>
<html>
<body>
<a href="#" onclick="openBlankPage(event,'https://www.google.hu/?gws_rd=ssl');">
Go to google.com not refresh</a>
<p>The preventDefault() method will prevent the link above from following the URL.</p>
</body>
</html>
I’m sending people to a blank landing page in order to make sure the lead is tracked by our Facebook pixel. I can’t do it on the main site as we do not have control of it (so can’t add the pixel there).
I currently have the FB pixel in the body, and then under it I do my redirect in Javascript after a 1 second timeout:
<html>
<body>
<!-- Facebook Pixel Code -->
<script>
!function(f,b,e,v,n,t,s){if(f.fbq)return;n=f.fbq=function(){n.callMethod?
n.callMethod.apply(n,arguments):n.queue.push(arguments)};if(!f._fbq)f._fbq=n;
n.push=n;n.loaded=!0;n.version='2.0';n.queue=[];t=b.createElement(e);t.async=!0;
t.src=v;s=b.getElementsByTagName(e)[0];s.parentNode.insertBefore(t,s)}(window,
document,'script','https://connect.facebook.net/en_US/fbevents.js');
fbq('init', '[pixel_id]');
fbq('track', 'PageView');
fbq('track', 'Lead');
</script>
<noscript><img height="1" width="1" style="display:none"
src="https://www.facebook.com/tr?id=[pixel_id]&ev=PageView&noscript=1"
/></noscript>
<!-- End Facebook Pixel Code -->
<script>
function sendOn () {
window.location.replace("[redirect_url]");
}
setTimeout(sendOn, 1000);
</script>
</body>
</html>
This seems to have missed some visits though. What’s the best way for me to make sure the pixel has fired before the redirect? Should I put the pixel tracking in the HEAD - is that enough? Or is there a better JS event I can use than just timeout?
Thanks for your help!
Putting the pixel in the <head></head> tag will be your best bet.
The reason being is that pages load from top to bottom. If you put the pixel after all your <link></link> and <script></script> tags, then they have to load first, then your pixel will load. So if people leave your page before it fully loads all those items and doesn't get to the pixel then it won't track.
Facebook even recommends this: https://www.facebook.com/business/a/online-sales/conversion-tracking
EDIT: I also just noticed that your <noscript> image pixel doesn't fire the "Lead" event. It only fires a "PageView" event, which might point to your missing tracking numbers. You may want to either modify that url to send both events (if that's possible) or add a second image tag to send the "Lead" event.
I'm doing a simple project for a digital arts class. I want to do a simple little choose your own adventure game, where you watch a clip, then choose from up to several different options on what to do next. Your decision will trigger a video, and the adventure will go on for a little awhile and the player will either escape the haunted house or be killed. This is my first time working with HTML5.
I need to do the following things:
1) When a button is pressed, a certain video is played.
2) After that video ends, the block of text at the top of the screen changes accordingly, presenting players with additional information and explaining their options in greater detail than the clips themselves can provide.
Right now, I just need help with step 1. I can't seem to figure out how to get the button onclick command to work correctly. The program displays the first Intro video just fine, but does not react at all when you click on any of the buttons. I was initially hoping to use something along the lines of an if else button.pressed command, but I can't find anything like that in HTML5. I know its not possible to troubleshoot my code since no one has access to my local files, but I'd appreciate any advice. Thanks!
Here's my code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Spooks: Choose Your Own Adventure</title>
<script>
function $(id)
{
return document.getElementById(id);
}
//Video Source Changers
function Door()
{
$('movie').src = "file:///C:/Users/Spencer/Videos/Spooks/Trapped.mp4" type="video/mp4">
}
function Wander()
{
$('movie').src = "file:///C:/Users/Spencer/Videos/Spooks/Sesame.mp4" type="video/mp4">
}
function Match()
{
$('movie').src = "file:///C:/Users/Spencer/Videos/Spooks/Sesame.mp4" type="video/mp4">
}
</script>
</head>
<body style= "background-color: black">
<p style= "color:white">What an awful time to get stranded out in the countryside! It's raining cats and dogs out here. Hungry, freezing, exhausted and desperate, you head to the nearest visible shelter - a decrepit old mansion. Surely southern hospitality will see you safely through the night.</p>
<p>
<video width="400" controls>
<source src = "file:///C:/Users/Spencer/Videos/Spooks/Intro.mp4" type="video/mp4">
</video>
</p>
<p>
<button onclick="Door()">This is creepy. I'll just go back through the front door.</button>
<button onclick="Wander()">Really weird, but I guess it beats the storm. The owner probably just ran off to get the lights working. I'll wander around a bit, see if I can find him.</button>
<button onclick="Match()">It'd be nice to be able to see before I make a decision one way or the other. Let's light a match...</button>
</p>
</body>
</html>
Looks like there are a couple of issues.
1) your $('movie').src is invalid javascript, you have some junk code (type="video/mp4">) at the end of the line and the line should end with a semicolon. e.g.
function Door()
{
$('movie').src = "file:///C:/Users/Spencer/Videos/Spooks/Trapped.mp4";
}
2) Your video tag doesn't have an id attribute so you are not actually referencing anything in your javascript call to update the src:
<video width="400" controls id="movie">
<source src = "file:///C:/Users/Spencer/Videos/Spooks/Intro.mp4" type="video/mp4">
</video>
I put an updated JSfiddle here: http://jsfiddle.net/tv7pahcf/
I am used to using href="#" during development as placeholder links so that if you accidentally click on it, nothing happens and it will not jump the page around while testing the page i.e. you know exactly which is a placeholder and which is a broken link.
However, When baseurl is defined in the head, href="#" fetches the baseurl address instead of the current page and appends the # at the end. This causes placeholder links to load the index page always. Annoying.
<!doctype html>
<html>
<head>
<base href="http://localhost">
</head>
<body>
<p>placeholder # only</p>
<p>empty string</p>
</body>
</html>
Is there a way to get back the "placeholder" behavior other than specifying the full path in the <a>'s href?
href="javascript:void(0);"
try this, so onclick the page wont jump nor will it be refreshed
This might be more of a hack than anything but you could always just ignore clicks from anchor tags:
$('body').on('click', 'a[href="#"]', function(e) { e.preventDefault(); });
If you are currently in development I suggest removing your base tag.
It defines the behavior of all the anchor tags on that page. For more information :
http://www.w3schools.com/tags/tag_base.asp
do it with javascript:
function onClick(event) {
document.getElementById('id').scrollIntoView({
behavior: 'smooth'
});
}
https://stackoverflow.com/a/48901013/4185912
Using HTML - Wondering if it's possible using Javascript, CSS or anything else to hide the video (Embedded mp4 on autoplay) after it is finished, or after an amount of time? Cheers for any help, if there's no way I'll find some other way.
You can use setTimeout() and SomeElement.style.display="none" together.
<!DOCTYPE html>
<html>
<head>
<script>
setTimeout(hideDiv, 10000); //Instead of 10000 put your video's length, in milliseconds
function hideDiv() {
document.getElementById("toHide").style.display="none";
}
</script>
</head>
<body>
<div id="toHide">
<p>Your video here</p>
</div>
</body>
</html>
In the example above, the div with id toHide disappears after 10 seconds. Simply place your video inside of the div. To change the time after which the div disappears, change the "10000" in setTimeOut() to your video's length, in milliseconds.