I am trying to figure out how to play my 'animation' video at a delay. It needed to have a transparent background and no controller, so like a gif.
I figured video is the only solution, however now it's either running in a loop or running once.
Example image:
<div id="nee">
<video poster="" id="bgvid" playsinline muted>
<source src=" rendermirror.webm" type="video/webm">
<source src="rendermirror.mov" type="video/mp4">
</video>
Also tried using an interval, but i don't get it to work properly.
var video = document.getElementById("bgvid");
video.addEventListener("canplay", function() {
setTimeout(function() {
video.play();
}, 5000);
});
If anyone has any tips, would be really appreciated.
Cheers,
I pause the video when load and the video plays after 5s
var video = document.getElementById("myVideo");
// pause video event
video.pause();
video.addEventListener("canplay", function() {
setTimeout(function() {
video.play();
}, 5000);
});
<video id="myVideo" width="320" height="176">
<source src="http://www.w3schools.com/tags/mov_bbb.mp4" type="video/mp4">
</video>
if you want to loop the video then you will need to add change this
var video = document.getElementById("myVideo");
// pause video event
video.pause();
video.addEventListener("canplay", function() {
setTimeout(function() {
video.play();
}, 5000);
});
<video id="myVideo" width="320" height="176" loop>
<source src="http://www.w3schools.com/tags/mov_bbb.mp4" type="video/mp4">
</video>
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 have a video file in my design which has length of 2min. For the first time the video will play from the beginning and then the video have to play from 1.00 sec to 2.00 sec in loop. Is this possible to do using jquery? I have tried alternative methods. It works but there is a jump in video. Change video source after the first video ends.
Here are the code I have:
JQuery:
document.getElementById('bgvid').addEventListener('ended', myHandler, false);
function myHandler(e) {
//*what to do?*//
}
HTML:
div class="anim-logo ">
<video playsinline autoplay muted poster="assets/img/video3.jpg" id="bgvid">
<source src="assets/img/video3.webm" type="video/webm">
<source src="assets/img/video3.mp4" type="video/mp4">
</video>
</div><!--end of anim logo-->
You can do something like this:
var video = document.getElementById('videoElm')
video.addEventListener('ended',function(){
// set the video's start position to the video's duration minus 10 seconds. "video.currentTime" is in milliseconds, "video.duration" is in seconds
video.currentTime = (parseInt(video.duration) - 10) * 1000;
video.play();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<video id="videoElm" autoplay muted>
<source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type="video/webm">
</video>
</div>
I am developing an html5 player supports ads with video-js
Since i know it doesn't work in iOS, is it the same on Android?
So far i've tried these with no luck on autoplay in Android
HTML
<video id="inReadPlayer" autoplay loop="loop"
controls preload="auto" class="video-js vjs-default-skin" width="640"
height="360" > <source src="'+videoSource+'" type="video/mp4">
</video>
JS
var player = videojs('inReadPlayer', { /* Options */ }, function() {
this.play();
this.on('ended', function() {
});
});
Thanks in advance
Try this:
var videoplayer = document.getElementById('inReadPlayer')
videoplayer.addEventListener("load", function() {
videoplayer.play();
});
videoplayer.onended = function() {
source.setAttribute('src', 'MAINVIDEO.mp4');
};
<video id="inReadPlayer" autoplay loop="loop"
controls preload="auto" class="video-js vjs-default-skin" width="640"
height="360" > <source src="'+videoSource+'" type="video/mp4">
</video>
Note that this snippet won't work because there is no video source
For my website, I wanted a specific video to play, once a condition is met.
e.g (If x = 1, play the video)
I have this code in the HTML file:
<div id="video">
<video width="320" height="240" autoplay,>
<source src=video_mp4 type="video/mp4">
<source src=video_ogg type="video/ogg">
Your browser does not support the video tag.
</video>
</div>
And in the JavaScript file:
document.getElementById("video").innerHTML.source.src = video_mp4;
document.getElementById("video").innerHTML.source.src = video_ogg;
But it doesn't seem to work.
You can use the following :
<video id="video1" src="vid.mp4"></video>
<script>
function playVideo(){
var video= document.getElementById("video1");
video.load();
video.play();
}
</script>
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;