I'd like to set up the button. Then if I hit that, the video will be starting at the position 30 secs elapsed. How can I code that?
My current code is just like this
<video id="video" controls="controls" autoplay="autoplay" name="media"><source src="video.mp4" type="video/mp4"></video>
<button name="test" onclick="alert(Math.floor(document.getElementById('video').currentTime) + ' secs elapsed!');">How much time has already elapsed?</button>
You can seek to a particular section of the HTML5 Video using its currentTime property:
JavaScript:
document.getElementsByName('test')[0].onclick = function () {
document.getElementById('video').currentTime = 120; // seeks to the 2nd minute
}
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 using the following JS code to play an HTML5 custom video and - at the same time - activating an iframe, that will be launched just 27 seconds after the play video button is clicked.
But, I'm experiencing 2 issues:
The play button is requiring 2 clicks to start the video, instead of
just 1
The iframe is randomly activated even when the play video button
isn't clicked (between 25 and 40 seconds after the page is loaded,
randomly)
Any idea why?
<script type="text/javascript">window.onclick=function() {
setTimeout('document.getElementById("dwayne").style.display="block"',27000);
setTimeout('document.getElementById("blackrussian").style.display="inline"',27000);
var video=document.getElementById("167868028");
var playButton=document.getElementById("play-pause");
playButton.addEventListener("click",function(){if(video.paused==true){video.play();
playButton.innerHTML=" ";}else{video.pause();
playButton.innerHTML=" ";}});
}</script>
Here's the html part:
<video class="video-js" id="167868028" preload="false" width="910" height="510" poster="img/snapshot.jpg" data-setup="{}">
<source src="video/vid.mp4" type="video/mp4"></video>
<div class="controls"><button type="button" id="play-pause" class="play"><img src="img/play.png"></button></div>
<iframe id="dwayne" class="whiterussian" scrolling="no" marginwidth="0" marginheight="0" frameborder="0" src="files/iframe.php"></iframe>
<div id="blackrussian"></div>
You've got the playButton.addEventListener nested inside the window.onclick, could be that's what's causing the two-click requirement.
And the setTimeout is inside window.click but not inside playButton.addEventListener("click"..., meaning clicking the button will not fire it, but clicking the window will, (after 27 seconds).
window.onload=function() {
var video=document.getElementById("167868028");
var playButton=document.getElementById("play-pause");
playButton.addEventListener("click", function()
{
setTimeout('document.getElementById("dwayne").style.display="block"',27000);
setTimeout('document.getElementById("blackrussian").style.display="inline"',27000);
if(video.paused==true){
video.play();
playButton.innerHTML=" ";
}else{
video.pause();
playButton.innerHTML=" ";
}
});
}
Haven't tested the code but it should work...
Based on your query, here the simplest way to make it works.
When clicking one time anywhere on the page, the video will start. Then 27 seconds later, the iframe receive a new src url, and then load.
window.onclick=function() {
document.getElementById("167868028").play()
setTimeout(loadFrame, 27000)
}
function loadFrame(){
document.getElementById("dwayne").src = "http://arunranga.com/examples/access-control/"
}
<video id="167868028" width="91" height="51" poster="img/snapshot.jpg">
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
</video>
<iframe id="dwayne" frameborder="3" src="" scrolling="yes"></iframe>
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"]()
});
CLO meeting notes
I am trying to create a video in my web app and let the user being able to click button on the page to jump to certain farm of the video.
I have something like
<video width="720" height="640" controls>
<source src='/assets/video/test.mp4' type="video/mp4">
</video>
<a href='#'>15 sec mark</a>
<a href='#'>25 sec mark</a>
<a href='#'>35 sec mark</a>
I have looked at js video page
http://www.w3schools.com/tags/ref_av_dom.asp
but it doesn't seem to provide the method or solution for it.
Can anyone given me any suggestions? Thanks a lot!
See this documentation which is more complete :
var mediaElement = document.getElementById('mediaElementID');
mediaElement.seekable.start(); // Returns the starting time (in seconds)
mediaElement.seekable.end(); // Returns the ending time (in seconds)
mediaElement.currentTime = 122; // Seek to 122 seconds
mediaElement.played.end(); // Returns the number of seconds the browser has played
Using an onclick event on the <a/> tag you should be able to set the currentTime property easily :
<video id="mediaElementID" width="720" height="640" controls>
<source src='/assets/video/test.mp4' type="video/mp4">
</video>
15 sec mark
Check out this docs. mediaElement.currentTime = 15 should do the trick.
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();
});