I was wondering if this is possible :
I have a movie with a Play button.
After click, the movie begins to play.
When the movie finish, I have a picture which cover my movie div.
Which options to use in my function:
<video src="video.com" id="myVideo">
</video>
<div class="images">
<img scr="some_pic.jpg" />
</div>
<script type='text/javascript'>
document.getElementById('myVideo').addEventListener('ended',myHandler,false);
const img = document.querySelector("img")
const video = document.querySelector("video")
function myHandler(e) {
// now the video has to hide, and show the img:
video.style.display = "none:
img.style.display = "block"
}
</script>
There are various options, including replacing the <video> tag with an <image> tag.
The easiest one I can think of is to have the image on a layer under the video, then when the video finishes, you can change layers (put image as the front layer and now video in the back layer).
When image is under the video, it has same size and position so to end-user it's invisible. This is set through the <style=> part where z-index is the layer position (higher number puts it above others of a lower number). The top and left options are the positions of up/down and left/right settings.
You can try using: (in the code below, I change their positions (not aligned) so you can see what is happening)...
<!DOCTYPE html>
<html>
<body>
<video id="myVideo" width="550" height="400" controls style=" z-index: 2; top: 50px; left: 100px; position: absolute; );">
<source src="some_video.mp4" type="video/mp4">
</video>
<div id="myPic" class="images" width="550" height="400" style=" z-index: 1; top: 80px; left: 140px; position: absolute; );">
<img src="some_pic.jpg" />
</div>
<script type='text/javascript'>
document.getElementById('myVideo').addEventListener('ended', myHandler, false);
const img = document.getElementById('myPic');
const video = document.getElementById('myVideo');
function myHandler(e)
{
// now the video has to hide, and show the img:
//video.style.display = "none:
//img.style.display = "block"
//# swap their layer positioning
img.style.zIndex = "2"; //# makes top
video.style.zIndex = "1"; //# makes bottom
}
</script>
</body>
</html>
I'm not sure if there's something else to it other than simply showing an image when the video is not playing, if that's not the case, the video tag has a poster attribute:
<video controls poster="/images/w3html5.gif">
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
Related
jQuery(document).ready(function($){
var image = new Array ();
image[0] = "/08/anek-ferry-traghetti-grecia.mp4";
image[1] = "/12/Composizione-2.mp4";
image[2] = "/11/Composizione-1.mp4";
var hasard = Math.floor(Math.random() * image.length);
$('#fond-aleatoire video').attr('src', 'http://neos.anekitalia.com/wp-
content/uploads/2018' + image[hasard]);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id class="fond-aleatoire">
<mediaelementwrapper id="mejs_8947924178991862">
<video loop="loop" autoplay="" playsinline="" muted="" width="1920"
height="600" src="http://neos.anekitalia.com/wp-
content/uploads/2018/11/Composizione-1.mp4"
id="mejs_8947924178991862_html5"
preload="none" style="margin: 0px; width: 1903px; height: 594.688px;">
<source type="video/mp4" src="http://neos.anekitalia.com/wp-
content/uploads/2018/11/Composizione-1.mp4">
</video>
</mediaelementwrapper>
</div>
I have the following code that is working on all browsers but not in safari
this is simply changing randomly the default video background of my wordpress site when the background has ID #fond-aleatoire, any suggestion how to fix this on safari? many thanks.
I have a question about how to play / stop the video when I mouse over. The user placed the mouse over the image and the video started playing in the place of the image, and when it was moved, the image returned and the video disappeared. Is it possible and how? I tried something but I have not got what I want.
$(document).on('ready', function() {
$('.image').on('mouseover', function() {
$('.video-preview').toggleClass('video-preview-show');
})
})
.image img {
width: 272px;
height: 160px;
}
.video-preview {
width: 272px;
}
.video-preview {
display: none
}
.video-preview-show {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="image">
<img src="https://content.active.com/Assets/Active.com+Content+Site+Digital+Assets/Cycling/Galleries/Cyclists+Should+Never+Do/cyclist-front.jpg">
</div>
<video class="video-preview lazy-hidden" playsinline="" autoplay="" muted="" loop="" width="100%" src="https://giant.gfycat.com/VerifiableTerrificHind.mp4"></video>
View on Codepen
Try with this
<div onclick ="clicksound.playclip()" onMouseover="mouseoversound.playclip()">
<video width="400px" height="auto" muted id="video1" onmouseover="this.play()" onmouseout="this.pause()">
<source src="http://mazwai.com/system/posts/videos/000/000/140/preview_mp4_2/joel_gerlach--rain-shot_in_los_angeleswith_the_panasonic_gh4.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
</div>
Try the below code. This will help you
$('.image').hover(function() {
$('.video-preview').addClass('video-preview-show');
},
function() {
$('.video-preview').removeClass('video-preview-show');
});
I have video tag :
<video id="test" autobuffer style="width:100%;" onClick="this.play(); controls>
<source src="some file" type="video/mp4">
</video>
And some Javascript :
<script type='text/javascript'>
var video = document.getElementsByTagName('test')[0];
video.onended = function(e) {
document.getElementById('test').innerHTML= '<iframe src="http://www.example.com/myframe" width="100" height="100"></iframe>';
};
</script>
Idea is ,when video end (video.onended) just show iframe or div in video tag. Something like advertisment info..
I try,but no succes..
Tnx,
You need to replace the whole video element rather than try and replace a child within it. So use parentNode to get the video elements parent
document.getElementById('test').parentNode.innerHTML= '<iframe src="http://www.example.com/myframe" width="100" height="100"></iframe>';
Maybe you can do like this : demo
<div id="test">
<video id="v" controls>
<source id='mp4' src="http://media.w3.org/2010/05/sintel/trailer.mp4" type='video/mp4'>
</video>
<iframe id="overlay" src="http://www.w3schools.com"></iframe>
</div>
and add some style
#test {
position: relative;
}
#overlay {
position: absolute;
...
}
You just have to add JavaScript code to hide when the video ends, and it will make the job I think ^^
Say i want to draw controls in canvas video without using video as parent attribute.With this code i am able to control canvas with video but somehow i want canvas without video as parent just simply controls canvas.Is it possible in any language?Or may be stupid question but pls help.
Code i am using but don't want to use:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Load Video Onto The Canvas</title>
<script type="text/javascript">
var videoElement;
var videoDiv;
function eventWindowLoaded() {
videoElement = document.createElement("video");
videoDiv = document.createElement('div');
document.body.appendChild(videoDiv);
videoDiv.appendChild(videoElement);
}
function videoLoaded(event) {
canvasApp();
}
function canvasApp() {
context.fillStyle = '#ffffaa';
context.fillRect(0, 0, theCanvas.width, theCanvas.height);
//Box
context.strokeStyle = '#000000';
context.strokeRect(5, 5, theCanvas.width-10, theCanvas.height-10);
//video
context.drawImage(videoElement , 85, 30);
}
var theCanvas = document.getElementById("canvasOne");
var context = theCanvas.getContext("2d");
setInterval(drawScreen, 33);
</script>
</head>
<body>
<div>
<video id="video" width="320" height="240">
<source src="video/browser.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' >
<source src="video/browser.ogg" type='video/ogg; codecs="theora, vorbis"'>
</video>
</div>
<div style="position: absolute; top: 50px; left: 50px;">
<canvas id="canvasOne" width="500" height="300">
Your browser does not support HTML5 Canvas.
</canvas>
</div>
</body>
</html>
If I understand you correctly: you want to draw only the video players controls (play, stop, pause etc.) to the canvas, not the video itself?
This can't be done. We have no access to the controls as these are supplied internally by the browser.
The only way around this is to disable the controls in the video element and manually create buttons using normal DOM elements, or by drawing and implement logic for them with the canvas (if you want the artistic freedom).
These buttons that you create manually, whether DOM/HTML buttons or canvas, simply triggers the commands on the video element itself from code (ie. play() etc.).
Here is an example I made a while back (although for a different purpose).
I have a few lines of Javascript that define a custom 'play' button for HTML5 video.
The issue I have is that they work fine for one video, and for one video only. I want to have several videos on my page with the same Javascipt code affecting all of them. So that the play button works individually on each video. At the moment it only works on the first video listed in HTML.
How do I make this work?
JS
var vid, playbtn;
function intializePLayer(){
vid = document.getElementById("my_video");
playbtn = document.getElementById("playpausebtn");
playbtn.addEventListener("click",playPause,false);
}
window.onload = intializePLayer;
function playPause(){
if(vid.paused){
vid.play();
playbtn.style.opacity = '0';
}else{
vid.pause();
playbtn.style.background = "url('http://i61.tinypic.com/xm8qdu.png')";
playbtn.style.backgroundSize = "105px 105px";
playbtn.style.opacity = '1';
}
}
CSS
#video_container{
position:relative;
width:480px;
height:264px;
}
button#playpausebtn{
background:url('http://i61.tinypic.com/xm8qdu.png') no-repeat;
position:absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin:auto;
border:none;
outline:none;
width:105px;
height:105px;
cursor:pointer;
background-size: 105px 105px;
}
HTML
<!-- Video #1 -->
<div id="video_container">
<button id="playpausebtn"></button>
<video id="my_video" width="480" loop>
<source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
</video>
</div>
<!-- Video #2 -->
<div id="video_container">
<button id="playpausebtn"></button>
<video id="my_video" width="480" loop>
<source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
</video>
</div>
This approach will help you have one->n videos. In the fiddle we first search the DOM for elements with a class name of playpausebtn, then add an onclick listener for each. This listener takes the video object (which has to be directly after the button in this case, you could change this code to use an incrementing id e.g. video_1, video_2 etc and find the video objects that way) and adds it to the onclick event listener.
This is only one approach, but it is a way to resolve your issues - please ask questions if there is anything you don't understand.
http://jsfiddle.net/tL5ZU/1/
HTML:
<!-- Video #1 -->
<div>
<button class="playpausebtn">Play</button>
<video width="480" loop>
<source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4" />
</video>
</div>
<!-- Video #2 -->
<div>
<button class="playpausebtn">Play</button>
<video width="480" loop>
<source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4" />
</video>
</div>
JS
//set up listeners for buttons
function init() {
//get all buttons
var buttons = document.getElementsByClassName('playpausebtn');
//for each button set up the onclick listener
for (var i = 0; i < buttons.length; i++) {
buttons[i].onclick = (function () {
//the video needs to be right after the button
var video = buttons[i].nextSibling.nextSibling;
return function () {
if (video.paused) {
video.play();
} else {
video.pause();
}
};
})();
}
}
init();