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
Related
This question already has answers here:
html5 video redisplay poster image onMouseOut
(6 answers)
Closed 2 years ago.
I did some javascript for the video, like when you hover on video then
that video will play and when you hover out from video, the video will pause....
But I want to do more, I want to display the poster on the video when the video gets Pause, the poster I have included to my video attribute..
And I want to use the same javascript for all the different videos with different posters.
Here is the code which I am using currently.
<!DOCTYPE HTML>
<html>
<head>
<title>video hover</title>
<style>
</style>
</head>
<body>
<video controls loop data-play="Hover" preload="auto" poster="MyPoster.jpg" height="300" width="500" muted="muted">
<source src="Myvideo.mp4" type="video/mp4">
</video>
<script type="text/javascript">
var vid=document.getElementsByTagName("video");
[].forEach.call(vid,function(item){
item.addEventListener('mouseover',hovervideo,false);
item.addEventListener('mouseout',hidevideo,false);
});
function hovervideo(e)
{
this.play();
}
function hidevideo(e)
{
this.pause();
}
</script>
</body>
</html>
Here is JSFiddle :- https://jsfiddle.net/vpoL6a5w/1/
As suggested in the link provided by Anurag Srivastava. Showing an overlay is your best option here.
You can do that by wrapping your video in a div element and adding an image as cover with the same src as the video poster.
In the hover function you can select a sibling and add/remove a hidden class.
Example:
<!DOCTYPE HTML>
<html>
<head>
<title>video hover</title>
<style>
.video-wrapper {
position: relative;
}
.cover-img {
position: absolute;
top: 0;
left: 0;
pointer-events: none;
width: 100%;
height: auto;
}
.cover-img.hidden {
display: none;
}
</style>
</head>
<body>
<div class="video-wrapper" height="300" width="500">
<video controls loop data-play="Hover" preload="auto" poster="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_960_720.jpg" height="300" width="500" muted="muted">
<source src="https://www.w3schools.com/html/mov_bbb.mp4"/ type="video/mp4">
</video>
<img class="cover-img hidden" src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_960_720.jpg" />
</div>
<script type="text/javascript">
var vid=document.getElementsByTagName("video");
[].forEach.call(vid,function(item){
item.addEventListener('mouseover',hovervideo,false);
item.addEventListener('mouseout',hidevideo,false);
});
function hovervideo(e)
{
var coverImg = e.target.parentNode.children[1];
coverImg.classList.add('hidden')
this.play();
}
function hidevideo(e)
{
var coverImg = e.target.parentNode.children[1];
coverImg.classList.remove('hidden')
this.pause();
}
</script>
</body>
</html>
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();)
Im trying to show the current duration (print currenttime live) when the video is playing.
I did read Kurt Van den Branden answer on Detect if HTML5 Video element is playing but to no avail
i eventually want to carry the currenttime value to a php variable $currenttime
below is my current code
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Html5 media events</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body >
<div id="output"></div>
<video id="myVideo" width="320" height="176" controls>
<source src="http://action.news/videos/Britney%20Spears%20-%20Overprotected%20(2009)%20Full%20HD%201080p_60%20fps.mp4" type="video/mp4">
</video>
<script>
var media = document.getElementById('myVideo');
// Playing event
var isPlaying = function(e) {
#$("#output").html("Playing event triggered");
};
// durationchange
var isdurationchange = function(e) {
$("#output").html(vid.currentTime);
};
media.addEventListener("playing", isPlaying, false);
media.addEventListener("durationchange", isdurationchange, true);
</script>
</body>
</html>
you should be able to carry it like this , the pros will help you with syntax
document.write("<a href=/time.htm?currentTime='.media.addEventListener("timeupdate", isdurationchange, true).'>link</a>;);
listen event timeupdate instead of durationchange
(also correct your typo error as #Jeto mentions in comment)
var media = document.getElementById('myVideo');
// Playing event
var isPlaying = function(e) {
$("#output").html("Playing event triggered");
};
// durationchange
var isdurationchange = function(e) {
$("#output").html(media.currentTime);
};
media.addEventListener("playing", isPlaying, false);
// media.addEventListener("durationchange", isdurationchange, true);
media.addEventListener("timeupdate", isdurationchange, true);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="output"></div>
<video id="myVideo" width="320" height="176" controls>
<source src="http://fiber.westnet.ca:81/videos/Britney%20Spears%20-%20Overprotected.mp4" type="video/mp4">
</video>
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 am trying to create an HTML5 video player without the default controls that will play/pause by simply clicking the video(or overlaying div). I want to hide the default controls completely. I want the user to only be able to pause/play by clicking on the video. Is this possible? My initial strategy was to overlay a transparent div above the element that would serve as my play/pause button. Below is the HTML and javascript I started, but need a little bit of help. Thanks everyone!
<!-- Video -->
<div style="height:980px;height:540px;">
<div style="z-index:100;position:absolute;">
<video id="myVideo" width="980" height="540" poster="http://d3v.lavalobe.com/voicecarousel/images/Carousel_Still.png" audio="muted" autoplay="true">
<source src="http://d3v.lavalobe.com/voicecarousel/video/CarouselWBG_v3.mp4" type="video/mp4">
</video>
</div>
<div id="imgPoster" style="height:300px; width:300px; background-color:red; z-index:500;position:absolute;"></div>
</div>
<!-- end Video -->
<!-- JAVASCRIPT FOR VIDEO PLAYER -->
<script type="text/javascript">
var videoEl = $('#myVideo');
playPauseBtn = $('#imgPoster');
playPauseBtn.bind('click', function () {
if (videoEl.paused) {
videoEl.play();
} else {
videoEl.pause();
}
});
videoEl.removeAttribute("controls");
</script>
<!-- END JAVASCRIPT FOR VIDEO PLAYER -->
There's no need for two id attributes in the video tag, and there's no need for a separate source tag if only using one file format, and the video and poster you are linking to does not exist.
Anyway, example below:
<video id="myVideo" width="980" height="540" poster="http://d3v.lavalobe.com/voicecarousel/images/myPoster.png" audio="muted" autoplay="true" src="http://d3v.lavalobe.com/voicecarousel/video/myVid.mp4" type="video/mp4">
</video>
<script type="text/javascript">
$("#myVideo").bind("click", function () {
var vid = $(this).get(0);
if (vid.paused) {
vid.play();
} else {
vid.pause();
}
});
</script>
EDIT: adding a fiddle : http://jsfiddle.net/SKfBY/
Had a quick look at your site, and the video is cool :-)
If you look closely you'll see that there are two jQuery files added, not really the problem here, but you only need one, the second one will make your page load slower.
Also not the problem, but you should consider using the HTML5 doctype like below, as the video element is HTML5, but most browsers will figure it out anyway.
The problem seems to be my fault, jsFiddle automagically inserts the $document.ready function, and I forgot it in my example, that's why it's not working for you.
Here is a complete rundown of how I would write it, I removed both instances of jQuery for you and replaced with Google's version of jQuery, wich is usually a better option, and also you should probably remove any scripts that you don't need, like removing swfObject if the site does not contain any flash files using swfobject etc.
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="http://dev4.baytechlabs.com/Voice_Carousel/css/main/style.css"/>
<link rel="stylesheet" type="text/css" href="http://dev4.baytechlabs.com/Voice_Carousel/css/main/thickbox.css"/>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script src="http://dev4.baytechlabs.com/Voice_Carousel/js/main/cufon-yui.js" type="text/javascript"></script>
<script src="http://dev4.baytechlabs.com/Voice_Carousel/js/main/Pristina_400.font.js" type="text/javascript"></script>
<script src="http://dev4.baytechlabs.com/Voice_Carousel/js/main/MomsTypewriter_400.font.js" type="text/javascript"></script>
<script src="http://dev4.baytechlabs.com/Voice_Carousel/js/main/cufon-config.js" type="text/javascript"></script>
<script src="http://dev4.baytechlabs.com/Voice_Carousel/js/thickbox.js" type="text/javascript"></script>
<script src="http://dev4.baytechlabs.com/Voice_Carousel/js/swfobject.js" type="text/javascript"></script>
<script type="text/javascript" src="http://dev4.baytechlabs.com/Voice_Carousel/js/facebox/facebox.js"></script>
<link href="http://dev4.baytechlabs.com/Voice_Carousel/js/facebox/facebox.css" media="screen" rel="stylesheet" type="text/css"/>
<script type="text/javascript">
$(document).ready(function() {
$("#myVideo").bind("click", function () {
var vid = $(this).get(0);
if (vid.paused) {
vid.play();
} else {
vid.pause();
}
});
});
</script>
</head>
<body>
<video id="myVideo" width="980" height="540" audio="muted" autoplay="true" src="http://d3v.lavalobe.com/voicecarousel/video/CarouselWBG_v3.mp4" type="video/mp4">
</video>
</body>
</html>
This code works for me:
function vidplay() {
var video = document.getElementById("video1");
var button = document.getElementById("play");
if (video.paused) {
video.play();
button.textContent = "||";
} else {
video.pause();
button.textContent = ">";
}
}
function restart() {
var video = document.getElementById("video1");
video.currentTime = 0;
}
function skip(value) {
var video = document.getElementById("video1");
video.currentTime += value;
}
But setting the time to 0 rewound the video only; no playback. So I wanted the video to replay after rewinding, and came up with this:
function restart() {
var video = document.getElementById("video1");
var button = document.getElementById("play");
if (video.paused) {
}
else {
video.pause();
}
video.currentTime = 0;
video.play();
button.textContent = "||";
}
Here are the buttons:
<div id="buttonbar">
<button id="restart" onclick="restart();">[]</button>
<button id="rew" onclick="skip(-10)"><<</button>
<button id="play" onclick="vidplay()">></button>
<button id="fastFwd" onclick="skip(10)">>></button>
</div>
My two-cent's worth...
Cheers