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();
});
Related
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 trying to display many video thumbnails/posters without actually loading the video...
Bascially what I've got is the following:
<div class="col-sm-3" style="padding: 20px;" onclick='location.href="/videoDetails/{{ #video.ID }}"'>
<video width="100%" style="cursor:pointer;"
<source src="/{{ #video.path }}">
Your browser does not support the video tag.
</video>
</div>
That hole thing is in a foreach loop and with that, it loads up to 100 videos on one page...
My problem now is that this gets super slow, the more videos there are load at once..
Now I found this answer on a StackOverflow thread, where it says to use the attribute preload="none" on the video tag... That seems to speed up the loading (because it doesn't preload the videos), however, it doesn't display any image (preview) at all..
In my case, there's no reason to load the hole video though, because (as you can see in the code), the actual video is then displayed on another page, when clicking on the div.
Also, just to make sure you got me right, I want to display the auto generated preview of the first frame of the video. I can't upload a seperate image to display it with the poster attribute, it has to be the default image..
Is there any way I can achieve this? I'm also open to Javascript/jQuery solutions...
You can get video frames in different time periods with append #t in the video source url. But with the attribute preload none value you cannot get the video frames. So You need to use the metadata value in the preload attribute.
These are the three values you can use in the preload attribute:
none - Hints to the browser that the user likely will not watch the video, or that minimizing unnecessary traffic is desirable.
metadata - Hints to the browser that the user is not expected to need the video, but that fetching its metadata (dimensions, first frame, tracklist, duration, and so on) is desirable.
auto - Hints to the browser that optimistically downloading the entire video is considered desirable. - Hints to the browser that optimistically downloading the entire video are considered desirable.
You can check the below results with these three values.
<p>metadata</p>
<video width="300" height="150" controls="controls" preload="metadata">
<source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4#t=2" type="video/mp4" />
</video>
<p>none</p>
<video width="300" height="150" controls="controls" preload="none">
<source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4#t=2" type="video/mp4" />
</video>
<p>auto</p>
<video width="300" height="150" controls="controls" preload="auto">
<source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4#t=2" type="video/mp4" />
</video>
I would say that creating so many video HTML elements will affect performance anyhow, loading or not, since the DOM is under quite heavy pressure.
A different (and more advance) approach I would recommend is the following.
If you want that one image will load when the user clicks on it, you can "create" a video in that specific moment, triggering only the video requested.
So:
instead of the video tag, load an image with onclick listener, that will pass an ID to a JS function
when the user clicks it will create the video element.
at the same time, hide the image (or maybe a gif?)
Try to run the snippet here below :)
function myFunction(id) {
var element = document.getElementById(id);
var videlem = document.createElement("video");
element.innerHTML = '';
source = 'https://file-examples-com.github.io/uploads/2017/04/file_example_MP4_480_1_5MG.mp4';
var sourceMP4 = document.createElement("source");
sourceMP4.type = "video/mp4";
sourceMP4.src = source;
videlem.appendChild(sourceMP4);
videlem.autoplay = true;
element.appendChild(videlem);
}
<p>Click on the image</p>
<div id="img242">
<img onclick="myFunction('img242')" src="https://blog.majestic.com/wp-content/uploads/2010/10/Video-Icon-crop.png">
</div>
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 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"]()
});
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.