How to attach an alert to audio, javascript - javascript

How do I get the second audio to play on the second alert? I uploaded the website for an example of what I am trying to do. 3 seconds into the video, I am trying to make alerts appear. Which I've done. I just need to know how can I get the audio,'sorry.wav?.wav?.wav', to play on the second alert,'Is something here with me?'
I do not know javascript, at all, so please show me where a particular code goes into my current code, because simply I won't know.
Also this site is for an art assignment, so I appolgize if this is unethical, or odd, but this project requires attaching audio to alerts, or vice versa.
Current page example:
http://www.eves.website/second-original.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>eve_</title>
<link rel="icon" rel="preload" href="images/evecircle.png" />
<style>
#video {
margin-left:-10px;
margin-top:-10px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<style type="text/css">
body {
overflow:hidden;
}
</style>
<body onload="delayedAlert();">
<script>
var timeoutID;
function delayedAlert() {
timeoutID = window.setTimeout(slowAlert, 3000);
then.getElementsByTagName('audiotwo')[0];
}
function slowAlert() {
var audio= document.getElementsByTagName('audio')[0];
audio.play();
var myvar1;alert('Hello?')
audio.play();
var myvar2;alert('Is something here with me?');
}
</script>
<audio>
<source src="images/hellllloooo.wav" type="audio/wav" preload=true>
</audio>
<audiotwo>
<source src="images/sorry.wav?.wav?.wav" type="audio/wav" preload=true>
</audiotwo>
<video autoplay="autoplay" preload="auto" id="video" src="images/secondnew.mp4" width="1300px" height="auto" style="position:absolute; z-index:-1;" >
Video not supported.
</video>
</body>
</html>

<audiotwo> is not valid HTML, call it audio as well, and make sure the src is well-formed:
<audio>
<source src="images/sorry.wav?.wav?.wav" type="audio/wav" preload=true>
</audio>
(is it really images/sorry.wav?.wav?.wav? try fixing the filename)
Then select it via
const audio2 = document.getElementsByTagName('audio')[1];
and play it with
audio2.play();
(replace your second audio.play(); just before alert('Is something here with me?'); with audio2.play();)

Related

videojs basic implementation within a function

I would like to implement a basic code which runs videojs(http://videojs.com/getting-started/) upon a click. Implementing without a function works. But when I make it within a function (create DOM elements and attach them to the body), it does not. Thanks in advance
<!DOCTYPE html>
<html>
<head>
<link href="https://vjs.zencdn.net/7.0.3/video-js.css" rel="stylesheet">
<script src="https://vjs.zencdn.net/7.0.3/video.js"></script>
<!-- If you'd like to support IE8 (for Video.js versions prior to v7)
<script src="http://vjs.zencdn.net/ie8/ie8-version/videojs-ie8.min.js"></script>-->
</head>
<body>
<div id = 'hello'></div>
<video id="my-video" class="video-js" controls preload="auto" width="640" height="264"
poster="" data-setup="{}">
<source src="Selena_Gomez_Same_Old_Love.mp4" type='video/mp4'>
<source src="" type='video/webm'>
</video>
Click me for playing the video
<script>
function playVideo(){
var video_element = document.createElement("VIDEO");
video_element.id= 'my-video';
video_element.class = 'video-js';
video_element.controls = 'auto';
video_element.setAttribute('preload','auto');
video_element.setAttribute('width','640');
video_element.setAttribute('height','264');
//source
var source_element = document.createElement("SOURCE");
source_element.src='Selena_Gomez_Same_Old_Love.mp4';
source_element.type= 'video/mp4';
document.body.appendChild(video_element);
document.body.appendChild(source_element);
}
</script>
</body>
</html>
I found the answer
video_element.appendChild(source_element);
document.body.appendChild(video_element);

Video Won't Redirect after Played

I have a video play onload of the page, and the script should redirect to another url when the video is finished playing.Though it doesn't redirect after the video is done playing.
SCRIPT:
function playVideo(){
var video = document.getElementById('video1');
video.play();
video.addEventListener('ended',function(){
window.location = 'http://www.google.com';
});
}
HTML:
<video id="video1" autoplay="autoplay">
<source src="missing.mp4" type="video/mp4" />
</video>
tried every script in here.
How can I redirect to a URL after a HTML video has ended?
doesn't seem to fix my issue.
I'm running on Google Chrome Version 48.0.2564.109 m
Full HTML for reference.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>The HTML5 Herald</title>
<meta name="description" content="The HTML5 Herald">
<meta name="author" content="SitePoint">
<link rel="stylesheet" href="css/styles.css?v=1.0">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endi
f]-->
<script type="text/javascript" src="http://code.jquery.com/jquery-2.2.0.min.js"></script>
<script>
playVideo();
function playVideo(){
var video = document.getElementById('video1');
video.play();
video.onended=function(){
window.location ='http://www.google.com';
}
}
</script>
<style>
body {margin:0;padding:0;}
video#video1 {width:100%;height:100%;}
</style>
</head>
<body>
<video id="video1" autoplay="autoplay">
<source src="missing.mp4" type="video/mp4" />
</video>
</body>
</html>
You can use : video.onended function(){} to make it working. May be the updated code will help you. Please try the below code
<video id="video1">
<source src="missing.mp4" type="video/mp4" />
</video>
<script>
playVideo();
function playVideo(){
var video = document.getElementById('video1');
video.play();
video.onended=function(){
window.location ='http://www.google.com';
}
}
</script>
Try with
window.location.href = 'http://www.google.com';
It could also be useful to swap the play and registering of the listener. So I would replace the js to:
function playVideo(){
var video = document.getElementById('video1');
video.addEventListener('ended',function(){
window.location.href = 'http://www.google.com';
});
video.play();
}
Edit
I assume that your video is not running because you invoked palyVideo function but because it auto starts. Since it is not started by your function, the event listener is not registered at all.
As a simple example to prove that try without wrapping it in a function:
var video = document.getElementById('video1');
video.addEventListener('ended',function(){
window.location.href = 'http://www.google.com';
});
video.play();
See it working in this Fiddle

Display few html5 videos with custom controls on single webpage

I would like to display different HTML5 videos on a single grid-based webpage.
I'm currently using this code for custom controls: http://jsfiddle.net/MELVIN29/nkckLhjx/
JS is working when there is only one video but doesn't when I want to duplicate players.
I've already looked for a solution on various topics but I have found nothing that suited. Thanks.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="robots" content="noindex, nofollow">
<meta name="googlebot" content="noindex, nofollow">
<script type="text/javascript" src="/js/lib/dummy.js"></script>
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<style type="text/css">
#video {
position: absolute;
top: 0;
left: 0;
}
#video-overlay {
position: absolute;
top: 0;
left: 0;
width: 320px;
height: 240px;
}
</style>
<title></title>
<script type='text/javascript'>//<![CDATA[
window.onload=function(){
var overlay = document.getElementById('video-overlay');
var video = document.getElementById('video');
var videoPlaying = false;
overlay.onclick = function() {
if (videoPlaying) {
video.pause();
videoPlaying = false;
}
else {
video.play();
videoPlaying = true;
}
}
}//]]>
</script>
</head>
<body>
<video width="320" height="240" id='video'>
<source src="http://w3schools.com/html/movie.mp4" type="video/mp4">
<source src="http://w3schools.com/html/movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
<div id='video-overlay'></div>
</body>
</html>
The first thing you need to do is create a CLASS name and assign it to each one of your videos. Remember, an ID is not needed.
I used the class name 'myvideo'.
HTML
// notice - - - - - - - - - - - - - - vvvvvvvv
<video width="320" height="240" class="myvideo">
<source src="http://w3schools.com/html/movie.mp4" type="video/mp4">
<source src="http://w3schools.com/html/movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
// notice same class name - - - - - - vvvvvvvv
<video width="320" height="240" class="myvideo">
<source src="http://w3schools.com/html/movie.mp4" type="video/mp4">
<source src="http://w3schools.com/html/movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
For demonstration purpose, I got rid of all the styles in your example along with the overlay since they are not needed at the moment.
ON TO THE JAVASCRIPT...
First, you will need a handle to the videos. getElementsByClassName returns an array of the specified class.
var myvideos = document.getElementsByClassName('myvideo');
Now, we can loop through the array of 'myvideos' with a for loop.
for (i=0; i<myvideos.length; i++){
// content
}
Next, we need to assign a boolean variable that belongs to each video element. This boolean will let us know if the video is playing or not.
for (i=0; i<myvideos.length; i++){
// video is not playing on load, so we assign it false
myvideos[i].playing = false;
}
Now we just need to bind the onclick function.
for (i=0; i<myvideos.length; i++){
myvideos[i].playing = false;
myvideos[i].addEventListener('click', function(e){
// note that this 'this' keyword refers to the object
// that triggered the click event
if (!this.playing){
this.play();
this.playing = true;
} else {
this.pause();
this.playing = false;
}
});
}
Please know that this is not the only way to do this.
Working Fiddle

How do I Start html5 video paused then after user begins video then autoplay?

I've created a html5 video playlist. When the page first loads I want the video to be paused, so the user has the choice to begin the autoplay sequence.
Code:
<!DOCTYPE html>
<html>
<head>
<script type='text/javascript'>//<![CDATA[
window.onload=function(){
var videoPlayer= document.getElementById('video');
videoPlayer.addEventListener('ended', function(){
this.pause();
this.src = "http://www.mp4point.com/downloads/8feeca1a540b.mp4";
}, false);
}//]]>
</script>
</head>
<body>
<video id="video" src="http://media.w3.org/2010/05/sintel/trailer.mp4" autoplay autobuffer controls />
</body>
</html>
Jsfiddle:http://jsfiddle.net/3uRq6/7/
By the looks of it you need to reverse your logic. Remove the autoplay attribute from the <video> and on your event listener you should change the src then play the video.
http://jsfiddle.net/3uRq6/9/
<!DOCTYPE html>
<html>
<head>
<script type='text/javascript'>//<![CDATA[
window.onload=function(){
var videoPlayer= document.getElementById('video');
videoPlayer.addEventListener('ended', function(){
this.src = "http://www.mp4point.com/downloads/8feeca1a540b.mp4";
this.play();
}, false);
}//]]>
</script>
</head>
<body>
<video id="video" src="http://media.w3.org/2010/05/sintel/trailer.mp4" autobuffer controls />
</body>
</html>

Handling HTML5 video-tag events cross browser

The following code should play a video then redirect to another page. It works in Safari and the latest version of Chrome (http://www.brigadapictures.com/Home_test.html).
I could use some help in getting it to execute on other browsers. At the very least, I need it to immediately redirect if it encounters a problem (instead of displaying a blank black screen).
<video src="http://brigadapictures.com/images/image1.mov"; id="myVideo" autoplay height="434" width="770">
</video>
<script type='text/javascript'>
document.getElementById('myVideo').addEventListener('ended', myHandler, false);
function myHandler(e) {
if (!e) {
e = window.event;
}
top.location.href = "http://www.brigadapictures.com/Home.html";
}
</script>
Currently there is only support for the HTML5 video object in Google Chrome, Safari (i.e. webkit) and Fx 3.5+ MSDN does have an article on HTML5 and video so IE10 may have joined the ranks
For all other browsers I would redirect using script before even trying to show the video tag
Here is some info from Adobe about codecs and how to control the movie with JS
Here is a very good HTML5 tutorial I found
They suggest video for everybody or this code which I modified for IE8:
function supports_video() {
return !!document.createElement('video').canPlayType;
}
I created this page from your page, but I am getting 206 Partial content in Firefox. Chrome works perfectly. Perhaps a byte serving process is needed or Firefox just need another file as specified here with the example page here
<!DOCTYPE html>
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>HTML5 video page</title>
<script type="text/javascript">
function supports_video() { // test the availability of video support
var v = document.createElement('video');
return v && v.canPlayType;
}
function goHome() {
top.location.replace("http://www.brigadapictures.com/Home.html"); // do not want to break the back button
}
window.onload=function() {
if (supports_video) {
var video = document.getElementById('myVideo'); // not sure how IE8 gets to this line, but it does
if (video && video.addEventListener) video.addEventListener('ended', goHome, false);
else goHome(); // IE8 peculiarity.
}
}
</script>
</head>
<body>
<script type="text/javascript">
if (supports_video) {
document.write('Here this video is supposed to appear:<br /><video src="image1.mov" id="myVideo" autoplay="true" height="434" width="770">Video not supported anyway</video>');
}
else {
alert('Sorry, this browser does not support HTML5 video, redirecting...')
goHome();
}
</script>
</body>
</html>
Script to Autoplay a Video then Redirect to Another Page
This script is tested on Safari, Firefox, Chrome, Opera, and Internet Explorer. It also works (and autoloads) on iPhone.
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
<script type="text/javascript" src="http://brigadapictures.com/images/flowplayer-3.2.6.min.js">
</script>
</head>
<body>
<video width="488" height="488" autoplay id="myVideo">
<source src='http://brigadapictures.com/images/image2.mp4' type='video/mp4' />
<source src='http://brigadapictures.com/images/image1.mp4' type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
<source src='http://brigadapictures.com/images/image1.ogg' type='video/ogg; codecs="theora, vorbis"' />
<source src='http://brigadapictures.com/images/image1.webm' type='video/webm; codecs="vp8, vorbis"' />
<!-- Flowplayer as fallback for html5 video tag into the following container -->
<div id="flashfallback" style="width:488px;height:488px;display:block"></div>
</video>
<script type="text/javascript">
//<![CDATA[
var videotag = document.getElementById("myVideo"),
videosupport = !!videotag.canPlayType;
function myHandler(e) {
if(!e) { e = window.event; }
top.location.replace("http://www.brigadapictures.com/Home.html");
}
if (videotag.addEventListener) {
videotag.addEventListener('ended', myHandler, false);
}
if (videosupport) {
videotag.load();
videotag.play();
} else {
$f("flashfallback", "http://brigadapictures.com/images/flowplayer-3.2.6.swf", {
clip: {
url: "http://brigadapictures.com/images/image4.m4v",
onStart: function () {
this.setVolume(100);
},
onFinish: function () {
top.location.replace("http://www.brigadapictures.com/Home.html");
}
},
canvas: {backgroundGradient: "none"},
play: null,
plugins: {controls: null}
});
}
//]]>
</script>
</body>
</html>

Categories