I have an slider of videos, I want to autoplay when visible and autostop when not visible. The visible video at the moment of stay visible has a class (active) that identifies it.
<video class="item active" controls autoplay poster="" width="640" height="360">
<video class="item" controls autoplay poster="" width="640" height="360">
<video class="item" controls autoplay poster="" width="640" height="360">
How can I do that?
You can manipulate the states of video with javascript.
For playing for example you can select the video tag that have class active and play it:
document.querySelector('video.active').play();
For any other video tags you can just pause them with this code:
var videos = document.querySelectorAll('video.item');
for(var i = 0; i < videos.length; i++) {
videos[i].pause();
}
You will need to make this manipulation on click, or on slide change, and also take note that first you will need to stop all videos then just play the video with active class.
I trigger the events on my slider when translates an initialize a slide an then execute these functions:
When translate:
function(){
$('.item').find('video').each(function(){
this.pause();
});
When initialize a new slide (to automatically play it):
function(){
$('.active').find('video').each(function(){
this.play();
});
That solved my problem.
Try this:
$("video").prop("volume", 0.3).click(function() {
this[this.paused ? "play" : "pause"]()
});
Related
I have a special image, that 'magically' transforms to video - on load, on hover, on touch, on scroll - in any ways. I use the 'alt' attribute for it, because I tried to do the same with src and it didn't work.
jQuery('img[alt="SPECIAL ALT"]').each(function(){
jQuery(this).replaceWith( '<video alt="SPECIAL ALT" muted allowfullscreen autoplay loop poster="https://......poster.jpg"><source src="https://......video.mp4" type="video/mp4"></video>' );
});
jQuery('#jas-wrapper').mouseover(function(){
jQuery('img[alt="SPECIAL ALT"]').replaceWith( '<video alt="SPECIAL ALT" muted allowfullscreen autoplay loop poster="https://......poster.jpg"><source src="https://......video.mp4" type="video/mp4"></video>' );
});
jQuery('#jas-wrapper').scroll(function(){
jQuery('img[alt="SPECIAL ALT"]').replaceWith( '<video alt="SPECIAL ALT" muted allowfullscreen autoplay loop poster="https://......poster.jpg"><source src="https://......video.mp4" type="video/mp4"></video>' );
});
jQuery('#jas-wrapper').on('touchstart touchend', function() {
jQuery('img[alt="SPECIAL ALT"]').replaceWith( '<video alt="SPECIAL ALT" muted allowfullscreen autoplay loop poster="https://......poster.jpg"><source src="https://......video.mp4" type="video/mp4"></video>' );
});
I don't know a better way to do that, if you know - I'll use your advice.
Alt helps, but now that video has to be a part if a lightbox gallery, I use Magnific popup.
And when that poster-image is zoomed, it losts it alt attribute. I have only src attribute. How to use it for the same functions and to make it work?
I can't simply place the video without shapeshifting magic 'image->video', that's a task, I can try to explain, if needed, but maybe exists a simple way just to use image src?
I'm sorry that my english is not very good, I searched for many methods I could find on the Internet, but they were all unsuccessful.
My idea: When the website is opened, a video will be automatically played (A). When the mouse clicks on the video (rather than some buttons), video A will be replaced with video B, and keep the same size and format, and be on the same web page. And when the mouse is clicked again, video B is changed to video A again.
This is the code I tried but it failed：
function setVideo() {
document.getElementById("video-01").src="demo/2.mp4";
}
<div class="video" id="video-one" οnclick="setVideo()">
<video id="video-01">
<source src="demo/1.mp4" type="video/mp4"/>
</video>
</div>
I haven't learned how to program, so I don't know how to do it. I have tried to use in HTML to link to another video, but this will change the style of the page.
Can you help me please?
Like this?
const videoA = 'https://media.istockphoto.com/videos/attractive-woman-blogger-speaks-about-professional-voice-over-and-video-id1253606799'
const videoB = 'https://media.istockphoto.com/videos/aerial-shot-flying-along-road-with-driving-vehicles-trucks-and-cars-video-id1251170644'
document.querySelector('video').addEventListener('click', (evt) => {
const currentVideo = evt.target.getAttribute('src')
if (currentVideo === videoA) {
evt.target.setAttribute('src', videoB)
} else {
evt.target.setAttribute('src', videoA)
}
})
<video autoplay muted width="480" height="320" src="https://media.istockphoto.com/videos/attractive-woman-blogger-speaks-about-professional-voice-over-and-video-id1253606799"></video>
I'm using the toggle function to show and hide content, it works well, the only problem I have is that when I place a video the video continues to play even when it is hidden, is there any way to stop playing the video when it is hidden
$(document).ready(function(){
$("button").click(function(){
$("p").toggle();
});
});
<button>Toggle</button>
<p>the video is displayed here</p>
You can do:
$(document).ready(function(){
$("button").click(function(){
$("p").toggle();
if (document.getElementById('myVideo').paused)
document.getElementById('myVideo').play();
else
document.getElementById('myVideo').pause();
});
});
If video is paused, play it and if it is playing then pause it on the click.
I think you would want to check if your wrapping p element is visible, using $("p").is(":visible").
If it is visible, pause the video using document.getElementById("yourVideoId").pause(), obviously replacing "yourVideoId" with whatever you have in the id attribute on your <video> tag. Then, after you do that, you can call .toggle() on your p element.
If it is not visible, and the user clicks your toggle button, I would imagine you would just want to show the video, and not resume playing it, as that might be a little jarring to the user. If you do want that functionality, however, just add document.getElementById("video").play() in the else block in the example below.
Here is a working example to demonstrate the functionality:
$(document).ready(function() {
$("button").click(function() {
var p = $("p");
if (p.is(":visible")) {
document.getElementById("video").pause();
$(this).text("Show");
} else {
$(this).text("Hide");
}
p.toggle();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>
<video id="video" controls width="40%">
<source src=http://techslides.com/demos/sample-videos/small.webm type=video/webm>
<source src=http://techslides.com/demos/sample-videos/small.ogv type=video/ogg>
<source src=http://techslides.com/demos/sample-videos/small.mp4 type=video/mp4>
<source src=http://techslides.com/demos/sample-videos/small.3gp type=video/3gp>
</video>
</p>
<button>Hide</button>
Added width="40%" on the video so it fits in the snippet window.
I want to trigger play function of the video. . Can you suggest the javasript function to play this video ?
jsfiddle code is given here. To play the video I need to rightclick the video and they click play function of flashplayer.
I have the below video code in html:
<div class="content flowplayer is-splash is-closeable" id="vid1">
<video src="http://www.w3schools.com/html/movie.webm" tabindex="0">
<source type="video/mp4" src="http://www.w3schools.com/html/movie.mp4"></source>
<source type="video/webm" src="http://www.w3schools.com/html/movie.webm"></source>
</video>
</div>
I have update your code. It's working now.
You have to get element's id of tag video and then just say .play()
More example here.
Get a reference to the video element (e.g. by giving it an id then using document.getElementById), then call the play() method on it.
So I only want to access the play button of the video controls, no action when pressing the track bar or volume. I want something like this but with html5 video http://flash.flowplayer.org/demos/installation/multiple-players.html
jQuery(document).ready(function() {
$('.vids').click(function(){
$('.vids').each(function () {
this.pause();
});
});
});
<video controls="controls" class="vids" id="1">
<source src ....>
</video>
<video controls="controls" class="vids" id="2">
<source src ....>
</video>
....
So now all videos stop except the one I clicked but when I press the trackbar or volume, it also stops. Any solutions without making my own controls or making use of another videoplayer? I found different solutions but not as I want :S
I think you have to target the current item which you are clicking so that the clicked target get the command to process to do this try this one and see if this works for you:
$('.box').click(function(e){
$(e.target).pause();
});