I have a html5 webapp that is going to be displayed on tablet devices. In this webapp there is a video that is playing. The users are able to select different areas in the video to play a different video. This is done by overlaying an invisible image with area tags that call up js to switch the video. What I am wondering is if there is a way to load these videos quicker and possibly add some sort of video transition overtop to make it look more professional. Here is my current app:
<!doctype html />
<html>
<body>
<div id="wrapper">
<video id="video" width="320" height="240" autoplay>
<source src="video1.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<div style="position: absolute; left: 8px; top: 8px; z-index: 1;">
<img src="" width="320" height="240" usemap="#grid">
<map name="grid">
<area shape="rect" coords="0,0,160,240" href="javascript:loadLeftVideo()" alt="Left">
<area shape="rect" coords="161,0,320,240" href="javascript:loadRightVideo()" alt="Right">
</map>
</div>
</div>
<script>
function loadLeftVideo() {
document.querySelector("#video > source").src = "left.mp4"
var video = document.getElementById('video');
video.load();
video.play();
}
function loadRightVideo() {
document.querySelector("#video > source").src = "right.mp4"
var video = document.getElementById('video');
video.load();
video.play();
}
</script>
</body>
</html>
Alternatively you could try this solution. Based on Googles Media Source API.
Related
I am trying to have 2 different toggle videos as the hero. I will call them Video A and Video B. I want video A to autoplay on the homepage. I have a play button on video A. I want two things to happen when the play button is clicked:
hide Video A.
show video B.
I have successfully hidden Video A when the play button is clicked, but Video B is not visible (I can hear it playing, but cannot see it). I think it is a CSS problem, but am not sure.
Video B is too large to upload (I am using WordPress), so I have it as an iframe. Video A is within a video tag.
HTML:
<video playsinline autoplay muted loop id="poster-video" onclick="hideVid()">
<source src="video.mp4" type="video/mp4">
</video>
<div id="full-video" style="visibility:hidden" onclick="showVid()">
<iframe src="https://player.vimeo.com/video/?autoplay=1&loop=1&title=0&byline=0&portrait=0" frameborder="0" allow="autoplay; fullscreen" allowfullscreen>
</iframe>
</div>
<div id="xbut">
<span style="cursor:pointer" onclick="hideVid();showVid()">
<div class="ctrbutton"><img src="play-button-dark.png">
</div>
</span>
</div>
CSS:
video {
object-fit: cover;
width: 100vw;
position: absolute;
top: 0;
left: 0;
}
js:
function showVid() {
document.getElementById("full-video").style.display = "block";
}
function hideVid() {
document.getElementById("poster-video").style.display = "none";
}
when you hide video A also set video B visibility on true with
When I try to click on video using js in Friefox click and display in console the id of the video it doesn't work. Why?
$('.videoclass').click(function() {
console.log(this);
var id = $(this).attr("id");
console.log(id);
})
<video controls="" id="ui-id-1" class="videoclass" style="position: absolute; top: 118px; left: 61px;" width="320" height="240"> <source id="videoavantuuid" src="https://www.w3schools.com/tags/movie.mp4" type="video/mp4"> </video>
Firefox controls is the Whole Video Tag
Problem
"When I try to click on video using js in Friefox Firefox click and display in console the id of the video it doesn't work. Why? "
Explanation
Firefox has a play button center poster and Chrome does not. This is an obvious indicator that FF has controls attribute that covers the entire tag and Chrome does not, it's controls are accessible only at the bottom where the bar is.
Firefox video tag is interpreting the click on it's controls property first so the click event registered on .vid is never fired or more likely event was fired then e.stopPropagation() was called so nothing else would be triggered by a click.
Recap
To summarize so far:
Firefox video tag behavior: responds to click events with play/pause but no other callbacks are triggered.
Firefox controls interacts with all click events directed to the video tag.
Solution ⭐
If you need controls on the video tag, then do not register the click event on the video tag. Register an alternate yet similar event instead:
mousedown,focus, contextmenu, etc.
Demo
Review the Demo with Firefox:
There's 3 video tags:
#ID [controls] Event Result on Firefox v.60.0.2
#vid0 ---- true ------ click --------- Plays video / Does not run callback
#vid1 --- false ------ click --------- Does not play video / Runs callback
#vid2 ---- true ------ focus --------- Plays video / Runs callback ⭐
$('.vid').on("click", identify);
$('.ff').on('focus', identify); //⭐
function identify(e) {
var eventcurrentTarget = e.currentTarget.id;
var eventTarget = e.target.id;
var thisId = this.id;
console.log({
eventcurrentTarget,
eventTarget,
thisId
});
}
figure {
width: 320px;
margin: 0 auto 20px 0
}
figcaption {
font-size: 32px
}
.as-console-wrapper {
margin-left: 325px;
width: 40%;
min-height: 96%
}
.as-console-row:after {
display: none !important
}
<figure>
<figcaption>#vid0</figcaption>
<video id="vid0" class="vid" width="320" height="240" controls>
<source src="https://www.w3schools.com/tags/movie.mp4" type="video/mp4">
</video>
</figure>
<figure>
<figcaption>#vid1</figcaption>
<video id="vid1" class="vid" width="320" height="240">
<source src="https://www.w3schools.com/tags/movie.mp4" type="video/mp4">
</video>
</figure>
<figure>
<figcaption>#vid2 ⭐</figcaption>
<video id="vid2" class="ff" width="320" height="240" controls>
<source src="https://www.w3schools.com/tags/movie.mp4" type="video/mp4">
</video>
</figure>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Change the below piece of the code
$('.videoclass').click(function() {
to
$(document).on('click', '.videoclass', function(){
and it should work.
Ok, so let me tell you where I'm at. The audio file displays and loads. you can click play to play it. The jQuery isn't autoplaying the material. I'm having to load in the file based on the href of the link. Code is below. Trying to get this to autoplay.
$('.voiceLink a', resbox).click(function(e){
e.preventDefault();
var link = $(this).prop('href'),
audio = $('.audioControl', el.parent());
audio.find('source').prop('src', link);
audio.parent().css('display','inline-block');
audio.find('audio').load();
setTimeout(audio.find('audio').play(), 100);
$(window).scrollTop();
});
resbox = The wrapper box.
The HTML Element:
<div class="audioHide" style="display: none;">
<div class="audioControl" style="position:relative; top:10px; left:50px; display:inline-block;">
<audio controls><source src="#" type="audio/mpeg">
Not Supported
</audio>
</div>
</div>
Example Link:
<a target="_blank" href="http://relatientsounds.s3-website-us-east-1.amazonaws.com/recordings/2456266.mp3">2456266</a>
Edit
try this
audio.find('source').prop('src', link);
audio.parent().css('display','inline-block');
audio.find('audio').load();
//this line
audio.find('audio')[0].play();
Demo http://jsfiddle.net/m25kfy57/1/
i am working on a site that has a video as soon as we enter the site.
The problem is it just ends and I want to replace it with an image after it ends.
Is there a way I can redirect it within the same container.?
<video id="video_background" preload="auto" volume="5" autoplay="1"><!--or turn on loop="loop"-->
<source src="videos/trailer.webm" type="video/webm">
<source src="videos/trailer.mp4" type="video/mp4">
<source src="videos/trailer.ogv" type="video/ogg ogv">
</video>
You'll have to use JavaScript to detect video end but it's easy to implement:
var video = document.getElementById('video_background');
video.addEventListener('ended', function() {
// show image here
}, false);
I would recommend to target a parent container which has a pre-loaded image hidden and which you toggle to when the event kicks in (obviously also hiding the video element).
You could also add the image dynamically but be aware of that you will have a delay while the image is loading.
You need to wrap your video tag in a div container. Try the following code:
CSS:
#wrapper{
width:640px;
height:360px;
background:#000;
}
#image_background{
display:none;
}
HTML:
<div id="wrapper">
<video id="video_background" preload="auto" volume="5" autoplay="1" width="100%" height="100%">
<source src="videos/trailer.webm" type="video/webm" />
<source src="videos/trailer.mp4" type="video/mp4" />
<source src="videos/trailer.ogv" type="video/ogg ogv" />
</video>
<img id="image_background" src="yourImage.jpg" width="100%" height="100%" />
</div>
JS:
var video = document.getElementById('video_background');
var wrapper = document.getElementById('wrapper');
var image = document.getElementById('image_background');
video.addEventListener('ended', function() {
video.style.display = 'none';
image.style.display = 'inline';
}, false);
EDIT: how do i smooth-en the transition fade it in or something?
I would use jQuery for this as it is built with such functionalities.
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
var video = $('#video_background');
var image = $('#image_background');
video.on('ended', function() {
$(this).fadeOut('200',function(){//$(this) refers to video
image.fadeIn('200');
});
});
</script>
I'm working on a page that has multiple HTML5 video elements that popup in CSS modal boxes when a link is clicked. The page originally would begin download of every video on the page, but, after finding similar topics here, I was able to set the source to be src="", allowing the page to load quickly.
I'm having difficulty now trying to restore the download when a user selects a video and it pops up in the modal box.
I'm not new to Javascript, but I'm also not proficient. Ideally, each video source should be set to "", then when the video is opened, the video should reload. I also added a function to pause the video when the modal is closed as it used to continue playing. Any help or criticism is appreciated, I'm here to learn. Thanks!
HTML:
<div class="image" style="float:left;margin:0;"><img src="video-image.png" alt="Play visualization" width="150"/><br />Layers
<div id="layers" class="modalDialog">
<div>
Close
<h3>Layers</h3>
<video id="videoContainer" class="videoContainer" loop="loop" style="width:698px;">
<source src="video-file.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
<source src="video-file.webm" type='video/webm; codecs="vp8, vorbis"' />
<source src="video-file.ogv" type='video/ogg; codecs="theora, vorbis"' />
</video>
</div>
</div>
</div>
Javascript:
$(document).ready(function(){
for(var i=0; i< 20; i++)
{
document.getElementsByTagName("video")[i].src="";
}
$("#showModal").click(function() {
var videoID = document.getElementsById("showModal").getAttribute('href');
var videoElement = document.getElementsById(videoID).getElementsByTagName("video");
videoElement.load();
});
$("#closeModal").click(function() {
$("#videoContainer")[0].pause();
});
});
This answer is maybe related.
Dont have your files but got it working using the following code:
<video id="videoContainer" class="videoContainer" style="width:698px;">
<source id="mp4Source" src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
</video>
$("#showModal").click(function () {
var videoID = document.getElementById("showModal").getAttribute('href');
var videoElement = document.getElementById("layers").getElementsByTagName("video")[0];
var srcID = document.getElementById("mp4Source");
videoElement.src = srcID.getAttribute("src");
videoElement.load();
videoElement.play();
});