Background
Creating a portfolio page showcasing images and videos using Gatsby/React. I have stored the media sources in an array and then I traverse over this array to create a grid.
Problem
The video thumbnails in the grid are getting duplicated. The second video is getting the thumbnail of first video:
Although, the dev tools show different sources for these videos.
Happens again on another page:
Video objects are created as following:
<VideoContainer key={`vid-${section}-${itemCounter}`}>
<video className="proj-video" preload="metadata">
<source src={currImg.src} type={`videomp4`} />
</video>
<div className="btn-container">
<FontAwesomeIcon color="white" size="4x" icon="play" />
</div>
</VideoContainer>
<VideoContainer /> is a styled div.
It happens on multiple videos. What I've tried so far:
Ensure that the sources of these videos are different. When the video is played (by clicking on the play button over the thumbnail), correct video is played.
Add a key attribute on the video tag as well. But, it doesn't solves the problem.
Note: It is very indeterministic behavior because it doesn't happens always. Sometime, it gets corrected on page refresh and sometimes it doesn't.
Edit
You can see that I am not setting thumbnail from another source. It just displays the video frame. I append "#t=10" (any number) at the end of video URL and add preload="metadata" on the video tag to load the frame at that time.
Try adding a more unique key:
<VideoContainer key={currImg}>
<video className="proj-video" preload="metadata">
<source src={currImg.src} type={`videomp4`} />
</video>
<div className="btn-container">
<FontAwesomeIcon color="white" size="4x" icon="play" />
</div>
</VideoContainer>
vid-${section}-${itemCounter}, for its own nature, is a good identifier but not a good key, but it seems that may not be as unique as currImg is.
Related
I'm trying to display many video thumbnails/posters without actually loading the video...
Bascially what I've got is the following:
<div class="col-sm-3" style="padding: 20px;" onclick='location.href="/videoDetails/{{ #video.ID }}"'>
<video width="100%" style="cursor:pointer;"
<source src="/{{ #video.path }}">
Your browser does not support the video tag.
</video>
</div>
That hole thing is in a foreach loop and with that, it loads up to 100 videos on one page...
My problem now is that this gets super slow, the more videos there are load at once..
Now I found this answer on a StackOverflow thread, where it says to use the attribute preload="none" on the video tag... That seems to speed up the loading (because it doesn't preload the videos), however, it doesn't display any image (preview) at all..
In my case, there's no reason to load the hole video though, because (as you can see in the code), the actual video is then displayed on another page, when clicking on the div.
Also, just to make sure you got me right, I want to display the auto generated preview of the first frame of the video. I can't upload a seperate image to display it with the poster attribute, it has to be the default image..
Is there any way I can achieve this? I'm also open to Javascript/jQuery solutions...
You can get video frames in different time periods with append #t in the video source url. But with the attribute preload none value you cannot get the video frames. So You need to use the metadata value in the preload attribute.
These are the three values you can use in the preload attribute:
none - Hints to the browser that the user likely will not watch the video, or that minimizing unnecessary traffic is desirable.
metadata - Hints to the browser that the user is not expected to need the video, but that fetching its metadata (dimensions, first frame, tracklist, duration, and so on) is desirable.
auto - Hints to the browser that optimistically downloading the entire video is considered desirable. - Hints to the browser that optimistically downloading the entire video are considered desirable.
You can check the below results with these three values.
<p>metadata</p>
<video width="300" height="150" controls="controls" preload="metadata">
<source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4#t=2" type="video/mp4" />
</video>
<p>none</p>
<video width="300" height="150" controls="controls" preload="none">
<source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4#t=2" type="video/mp4" />
</video>
<p>auto</p>
<video width="300" height="150" controls="controls" preload="auto">
<source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4#t=2" type="video/mp4" />
</video>
I would say that creating so many video HTML elements will affect performance anyhow, loading or not, since the DOM is under quite heavy pressure.
A different (and more advance) approach I would recommend is the following.
If you want that one image will load when the user clicks on it, you can "create" a video in that specific moment, triggering only the video requested.
So:
instead of the video tag, load an image with onclick listener, that will pass an ID to a JS function
when the user clicks it will create the video element.
at the same time, hide the image (or maybe a gif?)
Try to run the snippet here below :)
function myFunction(id) {
var element = document.getElementById(id);
var videlem = document.createElement("video");
element.innerHTML = '';
source = 'https://file-examples-com.github.io/uploads/2017/04/file_example_MP4_480_1_5MG.mp4';
var sourceMP4 = document.createElement("source");
sourceMP4.type = "video/mp4";
sourceMP4.src = source;
videlem.appendChild(sourceMP4);
videlem.autoplay = true;
element.appendChild(videlem);
}
<p>Click on the image</p>
<div id="img242">
<img onclick="myFunction('img242')" src="https://blog.majestic.com/wp-content/uploads/2010/10/Video-Icon-crop.png">
</div>
I'm trying to make custom HTML5 audio event buttons. I know I can use the controls but I want to make my own my code is below:
<audio autoplay="true" loop src="vid/birth.mp3"></audio>
<button onclick="document.getElementsByTagName('audio').play()">Play</button>
<button onclick="document.getElementByTagName('audio').pause()">Pause</button>
When I load the page the audio starts but the controls won't work, I click them and nothing happens. What am I doing incorrectly?
Update:
I was able to figure out that had some z-index atribute issues that was pushing the buttons to the background and making them unusable. After some CSS trickery I was able to get it to work using the code below:
<audio id="audio" autoplay="true" loop="1" src="vid/birth.mp3"></audio>
<button onclick="audio.play()">Play</button>
<button onclick="audio.pause()">Pause</button>
Update:
I was able to figure out that had some z-index atribute issues that was pushing the buttons to the background and making them unusable. After some CSS trickery I was able to get it to work using the code below:
<audio id="audio" autoplay="true" loop="1" src="vid/birth.mp3"></audio>
<button onclick="audio.play()">Play</button>
<button onclick="audio.pause()">Pause</button>
I have a special requirement with html5 <video>, I hope, you guys can help me out.
Is it possible to add a <div>,<p> or something above the html5 <video> object?
Plus Trigger the PlayState of the Video and hide it, and show it after the video is stopped?
This is the Poster:
eg:
<video width="280" height="158" poster="img/thumb.png" controls>
<source src="TestVideo1.mp4" type="video/mp4">
Get a new Browser my friend
<h1>Title</h1>
<p>Some Description</p>
</video>
And is should look like this
Is there any possible way to do this?
Thank You
Note:
I have read this post Overlaying a DIV On Top Of HTML 5 Video but it didn't helped.
Images:
Poster
http://i.stack.imgur.com/vA1zn.png
It should be like this:
http://i.stack.imgur.com/qsZaI.png
You are going to have to use a combination of the canvas tag and javascript to get what you want.
Try taking a look at these two articles for a start:
video + canvas = magic
Using CSS3 and Jquery to create a custom HTML5 Player
So I only want to access the play button of the video controls, no action when pressing the track bar or volume. I want something like this but with html5 video http://flash.flowplayer.org/demos/installation/multiple-players.html
jQuery(document).ready(function() {
$('.vids').click(function(){
$('.vids').each(function () {
this.pause();
});
});
});
<video controls="controls" class="vids" id="1">
<source src ....>
</video>
<video controls="controls" class="vids" id="2">
<source src ....>
</video>
....
So now all videos stop except the one I clicked but when I press the trackbar or volume, it also stops. Any solutions without making my own controls or making use of another videoplayer? I found different solutions but not as I want :S
I think you have to target the current item which you are clicking so that the clicked target get the command to process to do this try this one and see if this works for you:
$('.box').click(function(e){
$(e.target).pause();
});
How do I simultaneously pause the player AND cause the the containing modal to slide up/away (to "un-reveal")?
Presently, after the play button is clicked, and the modal's upper-left (x)...the & #215;...is clicked...the modal slides away, but the video continues to play. To avoid this, the user must: 1) pause the video, and THEN 2) close the modal. I'd like a click or tap on any of the modal's triggers--for instance, clicking the (x)--to do both actions at the same time. I'm trying to find a solution that will work across platforms / devices.
Here's what I got so far, which is not working...
IN HEAD OF DOM BETWEEN SCRIPT TAGS
document.getElementById("pauseX").onclick = function () {
document.getElementById('player2').pause();
};
TRIGGER TO REVEAL MODAL
Click here to reveal modal.
VIDEO + MODAL CONTAINER
<div id="vid-1" class="reveal-modal">
<div class="center">
<video width="480" height="270" id="player2" poster="../media/vid-1.jpg" controls="controls" preload="none">
<source type="video/mp4" src="../media/vid-1-480x320.mp4" />
<source type="video/webm" src="../media/vid-1-640x480.webm" />
<object width="480" height="270" type="application/x-shockwave-flash" data="../build/flashmediaelement.swf">
<param name="movie" value="../build/flashmediaelement.swf" />
<param name="flashvars" value="controls=true&file=../media/vid-1-480x320.mp4" />
<img src="../media/vid-1.jpg" width="480" height="270" alt="Vid 1"
title="No video playback. Update browser, enable Javascript, or install Flash." />
</object>
</video>
</div>
<a id="pauseX" class="close-reveal-modal">×</a>
</div>
Already tried many other solutions, including...
Javascript to stop HTML5 video playback on modal window close
...so any help is appreciated. I think it's possible either the MediaElement.js or Reveal.js file may need to be tweaked or something?
Incidentally, clicking anywhere outside of the modal--i.e., on the "gloss"--causes it to slide up/away; hitting the escape key on the keyboard does the same. Clicking anywhere on the video player causes it to pause. Would love it if all of these functions are retained along with tapping on mobile devices. (Haven't tested that yet.)
if you have document.getElementById("pauseX").onclick... at the top of your document probably the code doesn't work because element with id pauseX is not already on the dom. Look at the javascript console, you should see some related error
Try to move these instructions on the bottom or on DOM ready event
Got it solved with this script...
<script>
$('.close-reveal-modal').click(function() {
$('video, audio').each(function() {
$(this)[0].player.pause();
});
});
</script>
There were multiple MediaElement.js vids on each page (one for each potential modal)...each vid being identified with the same id="player2" attribute...which was also keeping the page from validating. Tried switching that in my original script from getElementByID to getElementByName...didn't work. Created a class in lieu of an ID for each player...that didn't work. Irregardless of the validation issues: the above solution--simply inserting the .close-reveal-modal class directly into the "stop all" script for MediaElement.js works great. (Thanks #Fabrizio for suggesting I examine my ID attributes to begin with...)