Develop Reference

Video Preview using createObjectURL before upload in react js [duplicate]

I want to update the source tag in a HTML5 video element so that when I click a button, whatever's playing switches to a new video.
I have a Clip component that returns an HTML5 video element, with the source URL provided via props.
function Clip(props) {
return (
<video width="320" height="240" controls autoPlay>
<source src={props.url} />
</video>
)
}
I also have a Movie component, which contains multiple URLs, each corresponding to a section of the movie. It also contains a position attribute, which acts like an iterator by remembering which section is currently playing.
class Movie extends Component {
constructor() {
super();
this.state = {
sections: [
'https://my-bucket.s3.amazonaws.com/vid1.mp4',
'https://my-bucket.s3.amazonaws.com/vid2.mp4'
],
position: 0
};
}
render() {
const sections = this.state.sections
const position = this.state.position
return (
<div>
{position}
<Clip url={sections[position]} />
<button onClick={() => this.updatePosition()}>Next</button>
</div>
)
}
updatePosition() {
const position = this.state.position + 1;
this.setState({ position: position });
}
}
The Movie component renders a Clip component and a "Next" button. When the Next button gets clicked, I want to update the position attribute and re-render the HTML5 video element using the next URL from sections.
As of now, when I hit Next the HTML5 video source tag updates, but the element continues playing the video from the previous URL. Can anyone help me figure out how to reset the video element?
Update: I created a JSFiddle, which you can see here.
Update 2: Updating the src attribute on the video element works!

Quick and dirty awnser: Add a key prop to <Clip> or <video>, e.g.:
function Clip({ url }) {
return (
<video key={url}>
<source src={url} />
</video>
);
}
Recommended awnser: Trigger a load event for the video element whenever there's a new URL, e.g.:
function Clip({ url }) {
const videoRef = useRef();
useEffect(() => {
videoRef.current?.load();
}, [url]);
return (
<video ref={videoRef}>
<source src={url} />
</video>
);
}
Explanation: The video initially doesn't change because in essence you're only modifying the <source> element and React understands that <video> should remain unchanged, so it does not update it on the DOM and doesn't trigger a new load event for that source. A new load event should be triggered for <video>.
The dirty answer works because when you change the key of a React element, React understands that's a whole new element. It then creates a new element in the DOM which naturally will have its own load event triggered on mount.

Changing the src of <source /> doesn't seem to switch the video for some reason. This isn't a react issue I don't think. Probably just how <source /> works. Maybe you have to call .load() on the element again. But it's just easier to set it directly on the element itself.
See the comment to the top answer: Can I use javascript to dynamically change a video's source?
You can set src directly on element instead:
function Clip(props) {
return (
<video width="320" height="240" src={props.url} controls autoPlay>
</video>
)
}

Bind the URL in the src property of Video tag and not Source Tag
<video autoplay loop muted playsinline="true" webkit-playsinline="true" [src]="videoSrc" type="video/mp4">

Add a parent div to second video
My code:
{isMobile ? (
<video
autoPlay={true}
loop
className="moviles"
muted
playsInline
poster="/totto/kids.png"
>
<source src="/totto/losmoviles.webm"></source>
<source src="/totto/losmoviles.mp4"></source>
</video>
) : (
<div>
<video
autoPlay={true}
loop
className="moviles2"
muted
playsInline
poster="/totto/portada.jpg"
>
<source src="/totto/moviles.webm"></source>
<source src="/totto/moviles.mp4"></source>
</video>
</div>
)}

You can use the key attribute :
<video key={videoUrl} autoPlay width="100%">
<source src={videoUrl} type="video/mp4"></source>
</video>
If the video's key attribute change, the video component will be re-mounted

Don't preload video, but still show "thumbnail"

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>

Why is my javascript requiring 2 clicks instead of 1?

I'm using the following JS code to play an HTML5 custom video and - at the same time - activating an iframe, that will be launched just 27 seconds after the play video button is clicked.
But, I'm experiencing 2 issues:
The play button is requiring 2 clicks to start the video, instead of
just 1
The iframe is randomly activated even when the play video button
isn't clicked (between 25 and 40 seconds after the page is loaded,
randomly)
Any idea why?
<script type="text/javascript">window.onclick=function() {
setTimeout('document.getElementById("dwayne").style.display="block"',27000);
setTimeout('document.getElementById("blackrussian").style.display="inline"',27000);
var video=document.getElementById("167868028");
var playButton=document.getElementById("play-pause");
playButton.addEventListener("click",function(){if(video.paused==true){video.play();
playButton.innerHTML=" ";}else{video.pause();
playButton.innerHTML=" ";}});
}</script>
Here's the html part:
<video class="video-js" id="167868028" preload="false" width="910" height="510" poster="img/snapshot.jpg" data-setup="{}">
<source src="video/vid.mp4" type="video/mp4"></video>
<div class="controls"><button type="button" id="play-pause" class="play"><img src="img/play.png"></button></div>
<iframe id="dwayne" class="whiterussian" scrolling="no" marginwidth="0" marginheight="0" frameborder="0" src="files/iframe.php"></iframe>
<div id="blackrussian"></div>

You've got the playButton.addEventListener nested inside the window.onclick, could be that's what's causing the two-click requirement.
And the setTimeout is inside window.click but not inside playButton.addEventListener("click"..., meaning clicking the button will not fire it, but clicking the window will, (after 27 seconds).
window.onload=function() {
var video=document.getElementById("167868028");
var playButton=document.getElementById("play-pause");
playButton.addEventListener("click", function()
{
setTimeout('document.getElementById("dwayne").style.display="block"',27000);
setTimeout('document.getElementById("blackrussian").style.display="inline"',27000);
if(video.paused==true){
video.play();
playButton.innerHTML=" ";
}else{
video.pause();
playButton.innerHTML=" ";
}
});
}
Haven't tested the code but it should work...

Based on your query, here the simplest way to make it works.
When clicking one time anywhere on the page, the video will start. Then 27 seconds later, the iframe receive a new src url, and then load.
window.onclick=function() {
document.getElementById("167868028").play()
setTimeout(loadFrame, 27000)
}
function loadFrame(){
document.getElementById("dwayne").src = "http://arunranga.com/examples/access-control/"
}
<video id="167868028" width="91" height="51" poster="img/snapshot.jpg">
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
</video>
<iframe id="dwayne" frameborder="3" src="" scrolling="yes"></iframe>

Add event on html5 video play button

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();
});

Music playing continuously with name

I was actually able to make music play continuously throughout the pages without reloading, using frames (I know music playing continuously is not a good idea but the client really requested it, so I had no choice). Here is what I used for the frame with the music playing:
<body>
<div id="player">
<audio id="audio" controls="controls" autoplay="autoplay" loop="loop" style="width:150px;">
<source src="martnalia05namoracomigo.ogg" type="audio/ogg" />
<source src="martnalia05namoracomigo.mp3" type="audio/mp3" />
<embed src="martnalia05namoracomigo.mp3" hidden="true" loop="TRUE" autostart="TRUE"></embed>
</audio>
</div>
</body>
I inserted this music just to test, and I would like to know if it is possible to make a play list and if it is possible to inform the music which is currently playing with a link in it and a button to skip a music, for example:
[player]
| button previous | button to play/pause | button next
| name of the music (link to the page of the Album) |
[end of player]
Any suggestions?

You are wanting to make a small media player perhaps, if thats the case there are plenty of ready made script available to help you accomplish this. (Google is your friend).
If you do decide to go about it on your own here are my thoughts, they may help you in the right direction.
var data = [{audiourl: "filename1.mp3", artisturl:"http://example.com",name:"Song name"},
{audiourl: "filename1.mp3", artisturl:"http://example.com",name:"Song name"}];
Some sort of data structure to store the details of your tracks.
var audio = document.getElementById("audio");
audio.addEventListener('ended', playNext);
Finally some sort of function to handle the switching of tracks
var currentTrack = 0;
function playNext(options){
currentTrack++;
if (currentTrack > data.length){
currentTrack = 0;
}
var audiosrc = document.getElementById('embed_element_id') // or some other selector method
audiosrc.src = data[currentTrack].audiourl;
audiosrc.play();
}
Im not totally sure on the HTML5 audio specification but i would assume its along these lines.
Hope this helps

You're probably going to have to use a media player plugin. Try LeanBack Player:
http://leanbackplayer.com/ + http://leanbackplayer.com/player_extensions.html (XSPF Audio Playlist extension)
It's HTML5/CSS/JS with a Flash fallback option so you should be able to style it to suit your needs easily enough.