<html>
<head>
<style>
</style>
<script>
$(document).ready(function(){
playVid();
$('#NextBut').hide();
$('#PrevBut').hide();
});
</script>
</head>
<body>
<video width="600" onended="myFunction()" id="myVideo">
<source src="DubImages/Malaysia ad.mp4" type="video/mp4">
</video>
<script>
var vid = document.getElementById("myVideo");
function playVid() {
vid.play();
}
function myFunction() {
setInterval(function(){ NextPage(true); }, 1000);
setInterval(function(){ $('#NextBut').show(); }, 1000);
}
</script>
</body>
</html>
This code working in a desktop browser but in mobile, it's not working, please help. playVid() I am calling once document load complete cross checks my code is correct or wrong. the function is not working.
Related
I am trying to make a html page which can redirect after 10, after the video playing is over.
I tried the below code but it redirects immediately when I load the page.
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js">
</script>
<script type="text/javascript">
$(document).ready(function(){
$("#myVideo").bind('ended', setTimeout(function(){location.href="http://www.localhost.com";}, 3000));
});
</script>
<video src="http://www.w3schools.com/html/movie.mp4" id="myVideo" controls>
video not supported
</video>
Try something like this:
$(document).ready(function() {
$("#myVideo").bind('ended', function() {
setTimeout(function() {
location.href = "http://www.localhost.com";
}, 3000)
});
});
Demo
$(document).ready(function() {
$("#myVideo").bind('ended', function() {
setTimeout(function() {
location.href = "http://www.localhost.com";
}, 3000)
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<video src="http://www.w3schools.com/html/movie.mp4" id="myVideo" controls>
video not supported
</video>
Im trying to create a nice background video that has some text on top as well as a button that i can use to pause and unpause the video, the video works fine and loops, but i cant pause the video.
<html>
<head>
<script src="js/script.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="css/custom.css">
</head>
<body>
<video poster="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/polina.jpg" id="bgvid" playsinline autoplay muted loop>
<source src="dudleyByDrone.mp4" type="video/mp4">
</video>
<div id="polina">
<h1>dudley</h1>
<p>Directed by joe bloggs
<p>original article
<p>blah blah</p>
<button>Pause</button>
</div>
</body>
</html>
js (I got this code from here and though it says "// only functional if "loop" is removed" i have tried removing "loop" and it still doesn't pause:
var vid = document.getElementById("bgvid");
var pauseButton = document.querySelector("#polina button");
function vidFade() {
vid.classList.add("stopfade");
}
vid.addEventListener('ended', function()
{
// only functional if "loop" is removed
vid.pause();
// to capture IE10
vidFade();
});
pauseButton.addEventListener("click", function() {
vid.classList.toggle("stopfade");
if (vid.paused) {
vid.play();
pauseButton.innerHTML = "Pause";
} else {
vid.pause();
pauseButton.innerHTML = "Paused";
}
})
The following code should allow you to pause the video
$(function() {
$('#polina button').on("click", function() {
$('video')[0].pause();
});
});
EDIT: changing pause(); to play(); will do exactly what you think it will.
You need to reference the button with more specificity.
var playPause = document.querySelector("#playPause");
There are changes throughout the source playButton changed to playPause which is not the problem only a preference. An indirect selector may or may not work well with document.querySelector() since it tends to accept simple selectors more readily (from experience, not sure if it's documented.)
SNIPPET
var vid = document.getElementById("bgvid");
var playPause = document.querySelector("#playPause");
function vidFade() {
vid.classList.add("stopfade");
}
vid.addEventListener('ended', function() {
// only functional if "loop" is removed
vid.pause();
// to capture IE10
vidFade();
});
playPause.addEventListener("click", function() {
if (vid.paused) {
vid.play();
playPause.innerHTML = "Pause";
} else {
vid.pause();
playPause.innerHTML = "Paused";
}
})
<html>
<head>
<script src="js/script.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="css/custom.css">
</head>
<body>
<video poster="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/polina.jpg" id="bgvid" playsinline autoplay muted loop>
<source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
</video>
<div id="polina">
<h1>dudley</h1>
<p>Directed by joe bloggs
<p>original article
<p>blah blah</p>
<button id="playPause">Play/Pause</button>
</div>
</body>
</html>
I need the contents of a div to display after an HTML video ends. I saw this post which is a start, but I'm lost on the actual function:
Detect when an HTML5 video finishes
<video src="video.ogv" id="myVideo">
video not supported
</video>
<script type='text/javascript'>
document.getElementById('myVideo').addEventListener('ended',myHandler,false);
function myHandler(e) {
// need to show a hidden div!
}
</script>
This should do the trick... I used example "classes" and "ids" since I don't have your full source code.
//CODE
<!DOCTYPE html>
<html>
<head>
<style>
.div-hide{
display: none;
}
</style>
<script type='text/javascript'>
document.getElementById('myVideo').addEventListener('ended',myHandler,false);
function myHandler(e){
var div = document.getElementById("selectme");
div.classList.remove("div-hide");
div.innerHTML = "I'm showing";
}
</script>
</head>
<body>
<video src="video.ogv" id="myVideo">
video not supported
</video>
<div id="selectme" class="div-hide">I'm Hidden</div>
</body>
</html>
You can hide div by id when the page loads, and show it again when video ends.
<video src="video.ogv" id="myVideo">
video not supported
</video>
<div id="divId">
Hello world!
</div>
<script type='text/javascript'>
$(document).ready(function() {
$("#divId").hide();
});
document.getElementById('myVideo').addEventListener('ended',myHandler,false);
function myHandler(e) {
$("#divId").show();
}
</script>
am trying to display multiple videos one by one using html5 and java script.. but its not coming.. i used the below code
<html>
<head>
<title>video example</title>
</head>
<script>
video_count =1;
videoPlayer = document.getElementById("ss");
video=document.getElementById("myVideo");
function run(){
video_count++;
//alert(video_count);
if (video_count == 4) video_count = 1;
var nextVideo = "video/video"+video_count+".mp4";
//videoPlayer.src = nextVideo;
alert(nextVideo);
videoPlayer.setAttribute("src", nextVideo[video_count]);
videoPlayer.play();
}
videoPlayer.onended(function(e) {
if (!e) {
e = window.event;
}
run();
};
</script>
<body onload="run();">
<video id="myVideo" height="400" width="400" autoplay>
<source id="ss" src="video/video1.mp4" type='video/mp4'>
</video>
</body>
</html>
currently code is displaying only first video and it will stop...
Let me show mine :D
<html>
<head>
<title>Subway Maps</title>
<link rel="stylesheet" type="text/css" href="main.css" />
</head>
<body onload="onload();">
<video id="idle_video" width="1280" height="720" onended="onVideoEnded();"></video>
<script>
var video_list = ["Skydiving Video - Hotel Room Reservation while in FreeFall - Hotels.com.mp4",
"Experience Conrad Hotels & Resorts.mp4",
"Mount Airy Casino Resort- Summer TV Ad 2.mp4"
];
var video_index = 0;
var video_player = null;
function onload(){
console.log("body loaded");
video_player = document.getElementById("idle_video");
video_player.setAttribute("src", video_list[video_index]);
video_player.play();
}
function onVideoEnded(){
console.log("video ended");
if(video_index < video_list.length - 1){
video_index++;
}
else{
video_index = 0;
}
video_player.setAttribute("src", video_list[video_index]);
video_player.play();
}
</script>
</body>
<html>
<head>
<title>video example</title>
</head>
<body>
<video id="myVideo" height="400" width="400" autoplay onended="run();">
<source id="ss" src="video/video1.mp4" type='video/mp4'>
</video>
<script>
video_count =1;
videoPlayer = document.getElementById("ss");
video=document.getElementById("myVideo");
function run(){
video_count++;
if (video_count == 4) video_count = 1;
videoPlayer.setAttribute("src","video/video"+video_count+".mp4");
video.load();
video.play();
}
</script>
</body>
</html>
Changes:
Placed the javascript code just before closing the body tag to ensure that the video object is loaded before the script is run.
video element already has an "onended" attribute so you can call the run function from there.
videoPlayer.setAttribute("src", nextVideo[video_count]); has an issue. nextVideo[video_count] implies that nextVideo is an array but is not . Its a string. So you can directly use nextVideo when setting the attribute.
videoPlayer = document.getElementById("ss"); gets the source element. You cannot call the play() function on that object, simply because that function isn't defined for it. So video.play() should work just fine.
Hope this solves your problem.
before this function call video.play(); need add: video.load();
otherwise it will still display the previous video. So the code should be
video.load();
video.play();
<video id="myVideo" height="400" width="400" autoplay onended="run();">
Add controls auto muted inside video tag.
<video id="myVideo" height="400" width="400" autoplay onended="run();" controls auto muted >
It's working fine. Thanks for you!
Little bit modified code I have attached below, I hope this is helpful for who searching the video plays continuously with entire screen,
enter image description here
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>