I have HTML5 player in form and use JS to step forward and step back in multi-level form. But, when user click any button (back, reset, etc.) the video is still playing. How to make auto-stop video when fieldset changes?
For example: Do you have a fever -> yes (here is video) -> reset -> video still playing in background.
JSFiddle
> <video id="video" width="960" height="600" controls="controls"
> autoplay="autoplay">
> <source type="video/ogg" src="http://www.advancedphotoshop.co.uk/discs/101/ogvs/holga.ogv" />
> </video>
$(".previous").click(function(){
if(animating) return false;
animating = true;
current_fs = $(this).parent();
previous_fs = $('#firstField');
Working example with a snipplet:
$(".pause").click(function(){
$('#video')[0].pause();
});
$(".play").click(function(){
$('#video')[0].play();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="pause">Pause/Stop</button>
<button class="play">Play</button>
<video id="video" width="960" height="600" controls="controls" autoplay="autoplay">
<source type="video/ogg" src="http://www.advancedphotoshop.co.uk/discs/101/ogvs/holga.ogv" />
</video>
Try to add :
var vid = $("#video");
function pauseVid() {
vid.pause();
}
$(".resetButton").click(function(){
pauseVid();
}
Related
i try to do this with many different way but i didn't get the result i want so can anyone help
<div style="width:500px;height:500px;">
<video controls autoplay width="400" height="400">
<source src="video/2.mp4" type="video/mp4">
</video>
</div>
and here is the only answer i found when i search but i dont understand it well and there is jquery on it i want to make it pure javascript
var figure = $(".video");
var vid = figure.find("video");
[].forEach.call(figure, function (item,index) {
item.addEventListener('mouseover', hoverVideo.bind(item,index), false);
item.addEventListener('mouseout', hideVideo.bind(item,index), false);
});
function hoverVideo(index, e) {
vid[index].play();
}
function hideVideo(index, e) {
vid[index].pause();
}
The answer is pretty simple:
document.getElementById("myVid").addEventListener("mouseover", function() {
this.play();
});
document.getElementById("myVid").addEventListener("mouseleave", function() {
this.pause();
});
<div style="width:500px;height:500px;">
<video id="myVid" controls autoplay width="400" height="400">
<source src="https://www.w3schools.com/tags/mov_bbb.mp4" type="video/mp4">
</video>
</div>
This should work for you.
You can find more information here about HTML5 video API.
const videoPlayer = document.querySelector('.videoplayer');
videoPlayer.addEventListener('mouseover', () => {
videoPlayer.play();
});
<p>Hover canvas to play the video</p>
<video class="videoplayer" width="320" height="240">
<source src="https://www.sample-videos.com/video/mp4/720/big_buck_bunny_720p_1mb.mp4" type="video/mp4">
</video>
I'm working on a webpage with videos.
When refraishing the page, I want to randomly start a muted video. After rolling on it, the video is unmute.
I've already done the randomly videos javascript but I can't mute the video...
When I launch the page, the video starts with sound...
Here is my code :
<div id="mixmen" onmouseover="play()" onmouseout="mute()" onclick="location.href='http://ap-mixmen.com/','_blank'" >
<div class="video">
<section id="videos">
<video id="videos" preload="none" style="height:100%">
<source src="imgs/mixmen.mp4" type="video/mp4"></video>
<video id="videos" preload="none" style="height:100%">
<source src="imgs/mixmen2.mp4" type="video/mp4"></video>
<video id="videos" preload="none" style="height:100%">
<source src="imgs/mixmen3.mp4" type="video/mp4"></video>
<video id="videos" preload="none" style="height:100%">
<source src="imgs/mixmen4.mp4" type="video/mp4"></video>
</section>
</div>
<script>
(function () {
"use strict";
document.getElementById("videos").muted = true;
var videosSection = document.getElementById("videos");
var videosSectionClone = videosSection.cloneNode();
var videos = videosSection.getElementsByTagName("video");
var randomVideo = videos.item(Math.floor(Math.random() * videos.length)).cloneNode(true);
randomVideo.removeAttribute("controls");
randomVideo.setAttribute("preload", "auto",);
videosSectionClone.appendChild(randomVideo);
videosSection.parentNode.replaceChild(videosSectionClone, videosSection);
randomVideo.play();
})();
var videosSection = document.getElementById("videos");
function play()
{
video.muted = false;
}
function mute()
{
video.muted = true;
}
</script>
</div>
Do you know why it doesn't work ?
try adding muted to the video tag
Ex:
Try adding "muted" to the video tags.
<video id="videos" preload="none" muted style="height:100%">
<source src="imgs/mixmen.mp4" type="video/mp4"></video>
Hi First section id must be different to your video tags then your video tags also must have a different id and finally you apply the "muted=true" to your selected element . If you want to mute all videos on the page load you can access to them by tag name then apply the mute as follow :
const videos= [...document.getElementsByTagName('video')];
videos.forEach((video) => { video.muted = true });
I am using a custom build html5 video. The video tag has an unique id. Now i want to create several video tags.
This is how it works wit only 1 video:
<video id="myVideo1" controls preload="auto" width="600" height="350" >
<source src="test.mp4" type="video/mp4" />
</video>
the js:
$(document).ready(function(){
var video = $('#myVideo1);
// stuff goes her...
So: how can i make several video tags with each his own id and trigger with javascript on these id's?
How to handle with several videos, independent from each other like below?
<video id="myVideo1" controls preload="auto" width="600" height="350" >
<source src="test1.mp4" type="video/mp4" />
</video>
<video id="myVideo2" controls preload="auto" width="600" height="350" >
<source src="test2.mp4" type="video/mp4" />
</video>
<video id="myVideo3" controls preload="auto" width="600" height="350" >
<source src="test3.mp4" type="video/mp4" />
</video>
Code to start the video:
//bind video events
$('.videoContainer')
.append('<div id="init"></div>')
.hover(function() {
$('.control').stop().animate({'bottom':0}, 500);
$('.caption').stop().animate({'top':0}, 500);
}, function() {
if(!volumeDrag && !timeDrag){
$('.control').stop().animate({'bottom':-45}, 500);
$('.caption').stop().animate({'top':-45}, 500);
}
})
.on('click', function() {
$('#init').remove();
$('.btnPlay').addClass('paused');
$(this).unbind('click');
video[0].play();
});
$('#init').fadeIn(200);
});
You can always select the actual element instead of relying on id's.
$(document).ready(function(){
$('video').each(function(){
var video = $(this);
// Do the rest of the instructions.
});
});
Is it possible to set a video to full screen on page load?
So far, the only answer I could get to work and was actually logical to me was setting the width and height on the element via CSS.
var $pop = Popcorn("#video");
$pop.play();
console.dir( $pop )
html{font-family:arial;}
#video{width:100%;height:100%;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://popcornjs.org/code/dist/popcorn-complete.min.js"></script>
<video height="180" width="300" id="video" controls>
<source src="http://videos.mozilla.org/serv/webmademovies/popcornplug.mp4"></source>
<source src="http://videos.mozilla.org/serv/webmademovies/popcornplug.ogv"></source>
<source src="http://videos.mozilla.org/serv/webmademovies/popcornplug.webm"></source>
</video>
I use Popcorn.js for playing the video on startup.
I am aware of setting CSS classes from JavaScript. The thing I'm more interested in would be the question: is there is a JavaScript based method to call, to maximize the video to full screen (on startup).
Using JavaScript, as suggested by Will, I also can't seem to get it to work properly
var video = $("#video");
var vid = video[0];
vid.play();
if (vid.requestFullscreen) {
vid.requestFullscreen();
} else if (vid.mozRequestFullScreen) {
vid.mozRequestFullScreen();
} else if (vid.webkitRequestFullscreen) {
vid.webkitRequestFullscreen();
}
html{font-family:arial;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://popcornjs.org/code/dist/popcorn-complete.min.js"></script>
<video height="180" width="300" id="video" controls>
<source src="http://videos.mozilla.org/serv/webmademovies/popcornplug.mp4"></source>
<source src="http://videos.mozilla.org/serv/webmademovies/popcornplug.ogv"></source>
<source src="http://videos.mozilla.org/serv/webmademovies/popcornplug.webm"></source>
</video>
I'm using html5 video player to play some videos and trying to use external controls with javascript. manage to get the player play and pause. but i cannot get it to mute and unmute using the buttons. if someone can help with this matter its highly appropriated.
Here is the HTML code
<video id="myMovie" width="600" height="600" loop preload="auto" video poster="img.jpg" controls>
<source src="my-video-file.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<button id="playButton">Play</button>
<button id="volButton">Mute</button>
JavaScript Code
function playMymovie() {
var element = document.getElementById('myMovie');
var element = document.getElementById('pbutton');
playButton.addEventListener('click', PlayOrPause, false);
volButton.addEventListener('click', VolMute, false);
}
function PlayOrPause() {
if(!myMovie.paused && !myMovie.ended) {
myMovie.pause();
}else{
myMovie.play()
}
}
function VolMute(){
if(!myMovie.muted){
myMovie.muted(true);
}else{
myMovie.muted(false);
}
}
Thanks in advance.
<html>
<body>
<div style="text-align:center">
<button onclick="playPause()">Play/Pause</button>
<button onclick="muteUnMute()">Mute/UnMute</button>
<br>
<video id="video1" width="420">
<source src="mov_bbb.mp4" type="video/mp4">
<source src="mov_bbb.ogg" type="video/ogg">
Your browser does not support HTML5 video.
</video>
</div>
<script>
var myVideo=document.getElementById("video1");
function playPause()
{
if (myVideo.paused)
myVideo.play();
else
myVideo.pause();
}
function muteUnMute()
{
if( !myVideo.muted)
myVideo.muted='muted';
else
myVideo.muted=false;
}
</script>
</body>
</html>
Try this:
var videoObject = document.getElementById('myMovie');
videoObject.muted = !videoObject.muted;