Fading out the HTML5 video poster image oncanplaythrough - javascript

I'm trying to animate the poster attribute of the HTML5 video element. Anyone have any idea how I can target the poster attr using jQuery? What I want to to is have the poster img fade out as the video starts playing to avoid the jumpiness that is currently present. Here's the code...
HTML:
<video id="vid preload="auto" loop="loop" poster="images/firstFrame.png">
<source src="video/bg.mp4" type="video/mp4" />
<source src="video/bg.webm" type="video/webm" />
</video>
JS:
$(document).ready(function() {
var vid = document.getElementById("vid");
vid.oncanplaythrough = function() {
$('POSTER???').animate({'opacity': '0'});
vid.oncanplay = vid.play();
}
});
I've searched Google and SO without finding a solution for this problem. (I found this: fade HTML5 video image / poster in and out but it does not solve the problem)
Thanks for your input.

Here is how I faded out the poster, or more precisely faded IN the video.
HTML:
<div id="container">
<video id='video' controls="controls" muted="muted" autoplay="true" preload='none'>
<source id='mp4' src="http://media.w3.org/2010/05/sintel/trailer.mp4" type='video/mp4'/>
<source id='webm' src="http://media.w3.org/2010/05/sintel/trailer.webm" type='video/webm'/>
<source id='ogv' src="http://media.w3.org/2010/05/sintel/trailer.ogv" type='video/ogg'/>
<p>Your user agent does not support the HTML5 Video element.</p>
</video>
</div>
CSS:
/* replaces the "cover" image in html5 video */
#container {
width: 100vw;
height: auto;
background-image: url("https://i.ytimg.com/vi/aqz-KE-bpKQ/maxresdefault.jpg");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-color: black;
}
#video {
width: 100%;
height: auto;
opacity: 0; /* start faded out */
transition: opacity 2s; /* css fade in */
}
jQuery:
/* wait for all elements of DOM to be rendered */
$(document).ready(function() {
/* force some of these attr */
$("#video").attr({"autoplay": true,
"muted": true});
/* double ensure that video is muted otherwise chrome
won't autostart */
$("#video").prop('muted', true);
/* when video auto plays, it fades in */
$("#video").bind('play', function (e) {
$("#video").css('opacity', 1.0);
});
});
Codepen
In action on my site
This works beautifully on chrome, but mileage may vary on other browsers.

Use attribute selector in jquery.but we can't fadeout the poster beacuse it is part of video if you fadeout means full video be hide. So we are able to just remove the poster from the video.
vid.oncanplaythrough = function() {
var $this = $(this);
$this.attr('poster' , '').fadeOut('fast');
$this.fadeIn('fast');
vid.oncanplay = vid.play();
}
Fiddle

Related

How to bing click/mousedown events for HTML Audio element

In the below shared stackblitz example, i have bound mousedown and click event for the audio element wrapper which is not triggered. I need to perform my own action, with audio element click being performed.
Couldn't find any solutions for this case, any thoughts over this is appreciated.
<span id="test">
<audio controls>
<source src="https://www.w3schools.com/html/horse.mp3" type="audio/mpeg">
</audio>
<br>
</span>
<script>
document.querySelector('#test').addEventListener('click', function() { console.log ('click called')});
document.querySelector('#test').addEventListener('mousedown', function() { console.log ('mousedown called')});
Sample: https://stackblitz.com/edit/9gw8e5-qujbbj?file=index.html,index.js
Any suggestions on this, to achieve this behavior. Couldn't find any suggestions regarding this in the MDN too (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio).
Tried the below way of wrapping inside the figure HTML element, which is an alternate solution instead of wrapping a separate element above the audio element. Those who want to wrap the audio elements within a inline/block nodes.
```css
figure {
display: block;
outline: none;
position: relative;
margin: 0;
padding: 0;
}
figure:after {
position: absolute;
content: "";
z-index: 1;
top: 0;
left: 0;
right: 0;
bottom: 0;
cursor: default;
display: block;
background: transparent;
}
```html
<span id="test">
<audio controls>
<source src="https://www.w3schools.com/html/horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</span>
Sample: https://stackblitz.com/edit/9gw8e5-dswrh3?file=index.html,index.js
Above sample makes the mousedown and click action work for the audio element.
Hope it helps someone..!
According to w3School, you can use the onplay attribute to read whenever the audio/video has been started or is no longer paused
<audio onplay="myFunction()">...</audio>
Instead, (I do not suggest to use this solution) if you would like to acces the mouse events, you can place an invisible div over the audio element:
<script>
function catchClick(){
alert("hi");
}
</script>
<div onclick="catchClick()" style="position:absolute;z-index:1;width:300px;height:30px;">
</div>
<audio controls>
<source src="/url/track.mp3" type="audio/mpeg">
</audio>

how can i increase the sizeof the video using the code below

I have written a code for playing and pausing a video but when I run the code, it appears small on the screen. However, I want to increase the size of the video.
<!DOCTYPE html>
<html>
<body>
<div class="col-md-10 canvas"></div>
<center>
<button onclick="playVid()" type="button">
Play Video
</button>
<button onclick="pauseVid()" type="button">
Pause Video
</button>
<br>
<video id="myVideo" width="320" height="176">
<source src="./audios/lp_gateway.mp4" type="video/mp4">
<source src="./audios/lp_gateway.mp4" type="video/mp4">
</video>
</center>
<script>
var vid = document.getElementById("myVideo");
// for playing
function playVid() {
vid.play();
}
// for pausing
function pauseVid() {
vid.pause();
}
</script>
</body>
</html>
If you are referring to the size of the video container, you can increase it by:
Increasing the width and height values in:
<video id="myVideo" width="1280" height="720">
Removing the width and height from the tag and specifying it in the css:
#myVideo {
width: 1280px;
height: 720px;
}
If you are referring to the size of the video being played inside the container, you can do it via css, just do the step #2 above and add object-fit: cover; to it:
#myVideo {
width: 1280px;
height: 720px;
object-fit: cover;
}

Swapping video tags is making the entire div empty

I am using JANUS to stream the video.
I have 2 div tags, one which is bigger than the other and I'm keeping an option to swap the elements. These div tags contain the video tags.
I have 2 video tags, one in which local video is being streamed and another in which the remote video is being streamed.
The following is the function I've attempted.
var swappingVideoFunction = function() {
var localVideo = $("#videolocal").html();
var remoteVideo = $("#videoremote1").html();
console.log(localVideo);
$("#videolocal").html(remoteVideo);
$("#videoremote1").html(localVideo);
}
I can see that in the html on inspecting, The video tag is present in the desired div but the video goes completely blank. The complete div looks empty. Is this the case with video tags in general? Is there an approach to do it?
So my thinking is that the object your writing to could be updating the reference. This is why the JQuery clone() function comes handy to remove reference from the original object.
Check out the following code snippet.
var swappingVideoFunction = function() {
var localVideo = $("#videolocal").clone();
var remoteVideo = $("#videoremote1").clone();
$("#videolocal").html(remoteVideo.html());
$("#videoremote1").html(localVideo.html());
}
.green {
height: 50%;
background-color: green;
padding: 10px;
box-sizing: contain;
}
.red {
height: 50%;
background-color: red;
padding: 10px;
box-sizing: contain;
}
.swap-button {
float: right
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="swap-button" onClick="swappingVideoFunction()">Do Swap</button>
<div id="videolocal">
<video class="red" width="320" height="240" controls>
<source src="local.mp4" type="video/mp4">
<source src="local.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
</div>
<div id="videoremote1">
<video class="green" width="320" height="240" controls>
<source src="remote.mp4" type="video/mp4">
<source src="remote.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
</div>

Disable video that is autoplaying at lower widths for mobile phones

I want my HTML5 video to disappear at 600px, as mobile phones don't autoplay and can't seem to run the javascript very well etc. The issue is my #media query to display none at 600px only non-displays the visual part of the video, not the audio - But I need the audio disabled as well below 600px. I have been researching this already on stack overflow and there are some possible solutions already, but I need help relating the code to my program if possible please.
There is a complication as I already have javascript running on my 'video' and "videoEnd" tags which is working fine and makes the video, padding and text disappear once the video is auto played.
Here is my existing code:
<html>
<video id="video" width="" height="" controls autoplay >
<source src="clip.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<div id="videoEnd" style="display:block">James Presents</div>
</html>
<script>
document.getElementById('video').addEventListener('ended',myHandler,false);
function myHandler(e) {
if(!e) { e = window.event; }
// What you want to do after the event
document.getElementById('video').style.display="none";
document.getElementById('videoEnd').style.display="none";
}
</script>
A previous answer is suggesting use this code to disable the video completely at a certain width, but being a novice I am not sure if the code is jquery or javascript and how to relate the code below to my id tags?
$(function() {
// onload
if(document.body.clientWidth >= 870) {
$('video').attr('autoplay', true);
}
// If you want to autoplay when the window is resized wider than 780px
// after load, you can add this:
$(window).resize(function() {
if(document.body.clientWidth >= 870) {
$('video').attr('autoplay', true);
}
});
});
UPDATED CODE BELOW
<script type="text/javascript">
$(function() {
var video = document.getElementById('video');
if (document.body.clientWidth >= 630) {
video.setAttribute('autoplay', true);
video.classList.remove('hide');
}
$(window).resize(function() {
if (document.body.clientWidth >= 630) {
video.classList.remove('hide')
video.play();
video.setAttribute('autoplay', true);
} else {
video.classList.add('hide');
video.removeAttribute('autoplay');
video.pause();
}
});
});
</script>
<video id="video" width="" height="" controls class="hide" >
<source src="clip.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<div id="videoEnd" style="display:block">James Presents</div>
<script>
document.getElementById('video').addEventListener('ended',myHandler,false);
function myHandler(e) {
if(!e) { e = window.event; }
// What you want to do after the event
document.getElementById('video').style.display="none";
document.getElementById('videoEnd').style.display="none";
}
</script>
//ALL CSS THAT RELATES IS BELOW
.hide {
display: none;
}
#videoEnd
{
margin-top:0;
margin-bottom:0;
text-align:center;
position:fixed;
z-index:9999;
top: 15%;
left: 50%;
/* bring your own prefixes */
transform: translate(-50%, -50%);
font-size:325%;
color:white;
font-family: Kroftsmann;
src:url('Kroftsmann.ttf');
}
video {
margin-top:10%;
width:65%;
position: fixed;
top: 40%;
left: 50%;
/* bring your own prefixes */
transform: translate(-50%, -50%);
background-color:rgb(15, 15, 15);
padding:2000px;
z-index:9999;
}
#media screen and (max-width:630px){
#videoEnd
{
visibility:hidden;
}
}
#media screen and (max-width:630px){
video
{
display: none;
visibility:hidden;
}
}
Remove the autoplay from your HTML video element to disable that as the default action, add the class .hide (or whatever you use to hide the element) so it's hidden by default. Then on load, add autoplay and remove .hide if the viewport width > your breakpoint.
Then on resize, if the viewport is < your breakpoint, add a CSS element that will hide the video (display: none;), remove the autoplay attribute if it exists, and pause() the video. If the viewport is > your breakpoint, undo all of that.
$(function() {
var video = document.getElementById('video');
if (document.body.clientWidth >= 870) {
video.setAttribute('autoplay', true);
video.classList.remove('hide');
}
$(window).resize(function() {
if (document.body.clientWidth >= 870) {
video.classList.remove('hide')
video.play();
video.setAttribute('autoplay', true);
} else {
video.classList.add('hide');
video.removeAttribute('autoplay');
video.pause();
}
});
});
.hide {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<p>something before the video</p>
<video id="video" controls class="hide">
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
<source src="https://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg">
Your browser does not support HTML5 video.
</video>
<p>something after the video</p>
The code suggestion is a mix of jQuery and plain javascript.
Here is one way, using plain javascript, that will, on page load, check if width is wider than 600, and if so, show and play the video. Your existing event handler will hide it when done.
window.addEventListener('load', function() {
if (window.innerWidth >= 600) {
var vid = document.getElementById('video');
var wrap = document.getElementById('videowrapper');
wrap.classList.toggle('hide');
vid.play();
vid.addEventListener('ended',function(e) {
wrap.classList.toggle('hide');
});
}
})
.hide {
display: none;
}
<div id="videowrapper" class="hide">
<video id="video" controls>
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
<source src="https://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg">
Your browser does not support HTML5 video.
</video>
<div>James Presents</div>
</div>

Can't pause video on closing popup

The problem is that, when I close the popup without pausing the video, the audio keeps playing. I cannot pause the video while closing the popup. The complete code is give below.
//html code
<style>
.yourModalClass {
padding: 0 1.5em 1em;
border-radius: 5px;
max-width: 380px;
color:#fff;
}
.yourModalClass a {
color:#fff;
}
</style>
abc
<div id="yourModalId" class="yourModalClass" style="display:none; margin-left: -20%; margin-right: 20%">
<h2>abc</h2>
<video width="600" height="400" controls="">
<source src="abc.mp4" type="video/mp4"/>
Your browser does not support HTML5 video.
</video>
</div>
<script>
$('#yourModalId').modality({
effect: 'slide-up'
});
</script>
//javascript
/* #author: Himanshu Kandpal (cse10324.sbit#gmail.com)*/
;(function(e,t,n,r){var i="modality",s=e("body")[0],o= {autoBind:true,clickOffToClose:true,closeOnEscape:true,effect:"",innerClass:"mm-wrap",modalClass:"modality-modal",onClose:"",onOpen:"",openClass:"mm-show",openOnLoad:false,userClass:""},u=function(t,n){var r=this;r.defaults=o;r.id=e(t).attr("id");r.settings=e.extend({},o,n);r.$modal=e(t).wrap('<div class="'+r.settings.modalClass+" "+r.settings.effect+" "+r.settings.userClass+'">'+'<div class="'+r.settings.innerClass+'">'+"</div>"+"</div>").show();r.$wrapper=r.$modal.parents("."+r.settings.modalClass);r.$triggers=e('a[href="#'+r.id+'"], [data-modality="#'+r.id+'"]');if(r.settings.autoBind){r.$triggers.each(function(){r.setTrigger(e(this))})}if(r.settings.clickOffToClose){r.$wrapper.click(function(e){e.preventDefault();if(e.target==r.$wrapper[0])r.close()})}if(r.settings.closeOnEscape){e(s).keyup(function(e){if(e.keyCode==27)r.close()})}if(navigator.appVersion.indexOf("MSIE 7.")!=-1){r.$wrapper.prepend('<div class="mm-ghost"></div>')}if(r.settings.openOnLoad)r.open();return r};e.extend(u.prototype,{open:function(e){this.$wrapper.add(s).addClass(this.settings.openClass);if(typeof this.settings.onOpen=="function")this.settings.onOpen();if(typeof e=="function")e();return this},close:function(e){this.$wrapper.add(s).removeClass(this.settings.openClass);if(typeof this.settings.onClose=="function")this.settings.onClose();if(typeof e=="function")e();return this},toggle:function(e){return this.isOpen()?this.close(e):this.open(e)},isOpen:function(){return this.$wrapper.hasClass(this.settings.openClass)},setTrigger:function(e){var t=this;e.click(function(e){e.preventDefault();t.toggle()});return t}});e.extend(u,{instances:{},init:function(e,t){var n={},i=this,s=0;e.each(function(){var e=new i(this,t);i.instances[e.id]=n[s]=e});return n[1]===r?n[0]:n}});e[i]=u;e.fn[i]=function(t){return e[i].init(this,t)}})(jQuery,window,document);
add id to the video controler element
call after slide up
$('#videoID')[0].pause();
$("#videoID")[0] will return you the DOM element not the jQuery object as the pause method is not the jquery method its the DOM method

Categories