I am able to pause and play the video onclick of the video itself. I want to be able to add a div in the video when the video is paused. Like a Play button. How do I do that ?
Do I need to add another div as an overlay and show it when the video is paused? If yes, how do I implement with the current code?
Working code for the video:
<video height="100%" width="100%" preload="none" onclick="this.paused ? this.play() : this.pause();">
<source type="video/mp4" src="myvideo.mp4">
</video>
Many thanks.
Related
$('a.thumbnail').click(function(){
$(this).('.cu_vd').trigger('play');
});
$('a.thumbnail').click(function(){
$(this).('.cu_vd').trigger('play');
});
I am trying to play the video by trigger but the video boxes are multiple with the same class. So I am trying to use 'this' so that It does not trigger to all, but it's not working This is the HTML page, where I am trying to play the video
https://dev-visualshowcase.cvent.com/bkeventvideos.html click on the IOV 1 (First box) the pop-up triggers and I want to play this video with JS function, instead of autoplay, because autoplay is not supporting in IOS https://dev-visualshowcase.cvent.com/eventvideos.html - here you can check the problem
You can use the data-attribute to target a specific video
<button class="thumbnail" data-target="video_1">Play the video</button>
<video id="video_1" playsinline="" preload="auto" muted="" controls="" loop="">
<source src="https://dev-visualshowcase.cvent.com/VS/video/vd_intro/01.mp4" type="video/mp4">
</video>
Each time you click on the .thumbnail button, you use the data-target to choose your video
$('.thumbnail').click(function(){
let target = $(this).attr('data-target')
$('#' + target).trigger('play');
});
i need help in php website.i am create website like online videos courses.i need help in video module.if playing any video and close it after some time and again play this video then need to play it where it can be stop or closed.
This video are getting from database not embedded video.for showing video i am using afterglow video player.
<video class="afterglow" id="myvideo" height="385px" width="770px">
<source type="video/mp4" src="adminpanel/video/<?php echo $results->c_video; ?>" />
</video>
Is there any script to solve this problem.
As suggested in the comments you have to save the position of your video somewhere. The most simple approach would be to use the localStorage. You can read more about localStorage in the official documentation: https://developer.mozilla.org/de/docs/Web/API/Storage
While the video is played the timestamp gets refreshed each second and the localStorage item is updated.
Then if you reload the page (remember: item still exists in the storage after a refresh) you check for its existence and set the video to the timestamp.
This should point you in the right direction.
let video = document.getElementById("example");
if (localStorage.hasOwnProperty("time")) { //if time was set before adjust the video to it
video.currentTime = localStorage.getItem("time");
}
let timer = setInterval(getTimestamp,1000);
function getTimestamp(){
localStorage.setItem("time", video.currentTime);
console.log(localStorage.getItem("time"));
}
<video id="example" width="320" height="240" controls>
<source src="yoursourcefile" type="video/mp4">
</video>
I want to display a video on a page which starts at a certain position (e.g., 10 seconds). I have found a way to program this with the code below.
My problem is that it takes the browser several seconds to start the video. As far as I have read, the browser needs to load the duration of the video before it can play it at the certain position.
Is there some way to start the video immediately without any delay?
This is my code:
HTML
<video style="display:block; margin: 0 auto;" width="512" height="288" id="vid1" autoplay>
<source src="video.ogg" type="video/ogg" />
<source src="video.webm" type="video/webm" />
</video>
Javascript
document.getElementById('vid1').addEventListener('loadedmetadata', function() {
this.currentTime = 10 ;}, false)
I would be very thankful for every hint!
Thanks in advance!
I won't have enough have the reputation to comment so posting as an answer.
Have you tried to put ??
document.getElementById("vid1").load();
This load() method is used to load/update the video.
The code snippet is given below. I have used impress.js to create an online presentation. I want to insert a video in the last slide which autoplays when the slide comes up. But I am unable to implement that. Can anyone please help me with this?
<div class="step box" data-x="0" data-z="4000" data-rotate-y="0">
<video width="800" height="600" controls autoplay>
<source src="electric_bulb_hd_stock_video.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
</div>
In impress.js, the DOM prevent video to autoplay, but you can use API, like this:
var videoStep = document.getElementById("video-step");
var video = document.getElementById("video");
videoStep.addEventListener("impress:stepenter", function(){
video.play();
}, false);
videoStep.addEventListener("impress:stepleave", function(){
video.pause();
}, false);
HTML:
<div id="video-step" class="step" data-x="-50000" data-y="2000" data-z="-60000" data-scale="6">
<video id="video" width="420" height="340" autoplay>
<source src="video/test.webm" type="video/webm">
</video>
</div>
With the code above, when you enter this step, the video will play automatically, and it will pause when you leave this step. Give it a try :)
Try autoplay="autoplay"
http://www.w3schools.com/tags/att_video_autoplay.asp
It should work.
Initially the poster is visible before video call start after video call ends i am able to see a black background in place of poster in video container.
below is the html tag that i have used for this purpose.
<div id="videoSmall">
<video id="videoInput" autoplay width="240px" height="180px" poster="img/webrtc.png"></video>
</div>
i have tried to reset "videoInput" div with this code
var tag = $("#videoInput").clone();
$("#videoInput").replaceWith(tag);
This code works and brings poster image back but the issue with this is when i am performing video call again without refreshing the page .. the poster is not vanishing in order to show video .
You can do this by adding ended eventListener to the video element, and call the video load() again.
Here is a working example: CodePEN
HTML:
<video id="video" width="320" height="240" controls poster="http://www.w3schools.com/images/w3html5.gif">
<source src="http://www.w3schools.com/html/movie.mp4" type="video/mp4">
<source src="http://www.w3schools.com/html/movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
JavaScript / jQuery:
var video= $('#video')[0];
var videoNew= $('#video');
videoNew.on('ended',function(){
video.load();
});