We Keep Coding

Play video, then redirect to a new page

I have a WordPress site with a page containing a video; I'd like this video to play automatically when the page is visited, and once the video has finished playing, I'd like a redirect to happen to a different page on my site.
I've followed the instruction from this post:
Redirect html5 video after play
But this doesn't seem to work for me and I can't figure out what I should do differently.
Here's the code currently on my page:
<script src="text/javascript">
function playVideo(){
var video = document.getElementById('addiction-video');
video.play();
video.addEventListener('ended',function(){
location.href = 'http://mywordpresssite.com/addiction-a-call-for-connection-acim/';
});
}
</script>
<video id="addiction-video" autoplay="autoplay" controls="controls" width="600" height="300">
<source src="http://mywordpresssite.com/wp-content/uploads/2015/12/Addictions.mp4" type="video/mp4" />
</video>
Can anyone tell why it's not redirecting after the video has finished playing?
I have the above code directly in my WordPress page; I've tried placing the script below the html, and I've tried adding the script into my theme settings, but neither made it work.
Thank you!

Firstly change <script src="text/javascript"> to <script type="text/javascript"> since you are not importing an external script file. Read a bit about <script> tag.
Secondly you don't need the playVideo() function. Rewrite your code accordingly:
<script type="text/javascript">
var video = document.getElementById('addiction-video');
video.addEventListener('ended',function(){
location.href = 'http://mywordpresssite.com/addiction-a-call-for-connection-acim/';
});
</script>
<video id="addiction-video" autoplay="autoplay" controls="controls" width="600" height="300">
<source src="http://mywordpresssite.com/wp-content/uploads/2015/12/Addictions.mp4" type="video/mp4" />
</video>
You don't need video.play();, since you have autoplay="autoplay" attribute in <video> tag. Read about it here and try it yourself here.
Thirdly keep your browser console open while writing a js code.
Good Luck!

Play sound in jquery mobile on different pages

I need to play sound in background that will repeat all the time - background music. I have added <audio> tag in my page html and added event
$("#audio-player").on('ended', function() {
//play again
}
in pageinit event of the page. And this works, but the music should continue even when I navigate to some other page, and I am not sure how to make this. I would appreciate any help. Thanks

You could use AJAX to load the new page. Use jQuery's load() to only load the #content part of the new page into the #content div of the current page.
HTML
<header>
<audio controls>
<source src="horse.ogg" type="audio/ogg">
</audio>
</header>
Page 2
<div id="content">
Page 1 content
</div>
</body>
</html>
JavaScript / jQuery
$('a').click(function(e){
e.preventDefault();
var target = $(this).attr('href');
$('#content').load(target + ' #content');
});

Get html 5 video to automatically open in fullscreen mode

I succeeded in getting a video to open in fullscreen mode in response to events (click, keypress) using the HTML 5 video tag and jQuery. How do I get the video to open in fullscreen on page load instead of onclick? Any help would be appreciated. Many thanks!
My HTML:
<div id="video_container>
<video id="video1" width="1280" height="720" controls autoplay>
<source src="videos/ballet.mp4" type="video/mp4">
<source src="videos/ballet.webm" type="video/webm">
<source src="videos/ballet.ogv" type="video/ogg">
</video>
</div>
My JavaScript:
$(document).ready(function(){
$('#video1').bind("playing", function(){
var elem = document.getElementById("video1");
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.mozRequestFullScreen) {
elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) {
elem.webkitRequestFullscreen();
}
});
$('#video1').bind("ended", function(){
$("#video_container").hide();
});
});

Sounds like you can't make the video fullscreen on page load, at least not for webkit browsers. According to the Safari Developer Library:
The webkitEnterFullscreen() method can be invoked only in response to
a user action, such as clicking a button. You cannot invoke
webkitEnterFullscreen() in response to a load event, for example.
Full article here: https://developer.apple.com/library/archive/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/ControllingMediaWithJavaScript/ControllingMediaWithJavaScript.html

Stop HTML5 audio with Javascript (Jquery?) + Zurb Modal

Here's my goal: To have autoplay audio stopped when a Zurb Modal window disappears.
I'm new with doing this stuff, especially javascript!
I have a Zurb Modal window functioning as a splash screen that pops up on page load. I have HTML5 audio in the window that autoplays (it was a request - I don't like autoplay!). The window disappears when the background is clicked, but the audio continues to play. I don't know how to get the audio to stop! If anyone has an idea, I'd really appreciate hearing about it.
<script type="text/javascript" src="js/jquery.reveal.js"></script>
<div id="myModal" class="reveal-modal">
<audio controls="controls" autoplay="autoplay">
<source src="audio/splash-loop-01.mp3" type="audio/mpeg">
<source src="audio/splash-loop-01.ogg" type="audio/ogg">
Your browser does not support the audio element.
</audio>
</div>
<div class="close-reveal-modal">CLOSE ME</div>​<!-- USE THIS TO CLOSE WINDOW -->
<script>
$(document).ready(function (){
$('#myModal').reveal();
});
</script>

$(document).ready(function (){
$('.close-reveal-modal').click(function(){
audioPlayer.pause();
audioPlayer.src = '';
audioPlayer.load();
});
});

To pause the audio, place this in your document.ready:
$('.close-reveal-modal').click(function(){
var myAudio = document.getElementsByTagName("audio")[0];
if(myAudio != undefined){
myAudio.pause();
}
}

Play a sound on page load using JavaScript

How can I play a sound file when the onload event fires using JavaScript?
For example:
If I have a webpage, when a user clicks on a button and this will pop-up a window. While the pop-up window is loading, the page will play a sound file.

Add a HTML5 audio element into your document:
<audio id="foobar" src="yoursample.ogg" preload="auto">
Set it hidden via CSS:
#foobar { display: none }
On the any JavaScript event handler play the audio:
var sample = document.getElementById("foobar");
sample.play();
For more information
https://developer.mozilla.org/en-US/docs/Using_HTML5_audio_and_video
Depending on your web application purpose you might want to support old browsers:
http://www.misfitgeek.com/play-sound-in-html5-and-cross-browser-support-with-backward-compatability/

Try this:
//store the audiofile as variable.
var popupsound = document.getElementById("notifypop");
function autoNotify() {
popupsound.play(); //play the audio file
}
#notifypop{ display:none;}
<body onload="autoNotify()"> <!--Play the audio file on pageload -->
<audio id="notifypop"> <!--Source the audio file. -->
<source src="path/sound.ogg" type="audio/ogg">
<source src="path/sound.mpeg" type="audio/mpeg">
</audio>
<script src="path/sound.js" type="text/javascript"></script><!--Load your javascript sound file.-->
</body>
Learn more about HTML5 media formats
https://developer.mozilla.org/en-US/docs/Web/HTML/Supported_media_formats

One way to do it would be to insert HTML audio tags onclick and set them to automatically start:
http://webdesign.about.com/od/sound/a/play_sound_oncl.htm