I'm still not really 'good' with Javascript and jQuery but I'm learning. The following, however, puzzles me:
I have a standard HTML5 video tag:
<video id="videoclip">
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
</video>
Now I need to change to video src via jQuery. If I only have ONE source i.e.
<source id="mp4" src="video.mp4" type="video/mp4">
I just do THIS:
function changeVideo() {
var newVideo = "new_video.mp4";
$("#videoclip").attr("src",newVideo) }
(I abbreviated this snippet. I actually have quite a few variables and things that happen set up there).
So this works well. But what do I need to do if I have TWO sources as in the very first code segment? An alternative webm file?
I tried giving the two source tags different IDs like so:
<source id="mp4" src="video.mp4" type="video/mp4">
<source id="webm" src="video.webm" type="video/webm">
and then did this:
function changeVideo() {
var newVideo = "new_video.mp4";
var newVideo2 = "new_video.webm";
$("#mp4").attr("src",newVideo);
$("#webm").attr("src",newVideo2)
Doesn't work. I mean it DOES the first time I play the video but when I use another similar function to change the sources yet again it won't work. It will be the same source set in the first place. It won't budge. :(
Everything I wrote over the last hours works perfectly now with this exception.
How do I get past this exception?
You need to add this in the changeVideo function:
$("#videoclip")[0].load();
$("#videoclip")[0].play();
Related
And if it stops it won't autoplay on reload or opening the site like it should. Once it has stoped it won't even work when i restart the localhost server again. I uploaded my files to github to test if it is something with my local server. So the problem still appears and i have no clue how to solve it since autoplay is active. If someone could help out i would appreciate that. Thanks in advance !
I changed autoplay and loop in the index file to autostart="true" didn't work either so i sticked to autoplay loop. i added buttons to stop the audio if anybody wants to.
<audio id="background-audio" class="background-audio" autoplay loop >
<source class="background-audio" type="audio/mpeg" src="audio/videoplayback7.m4a">
</audio>
var audio = document.getElementById("background-audio")
function belltwo() {
audio.play();
}
function bellthree() {
audio.pause();
}
website link : https://depressedunicorn.github.io/NiRiN/ if you want to test out the problem yourself
yeah already found the solution ^^ but only works on localhost server now: i can now stop the audio restart the page and it will autoplay everytime. but not on github page maybe it takes time for the changes to take effect.
<audio id="background-audio" class="background-audio" autoplay="autoplay" loop="loop">
<source type="audio/mpeg" src="audio/videoplayback7.m4a">
</audio>
<video id="background-video" class="background-video" allowfullscreen="true" muted="true" autoplay="autoplay" playsinline="playsinline" loop="loop">
<source src="/img/beepleloops/beepleDnB93.mp4" type="video/mp4">
I need to show multiple instances of a video tag on one page. I'm trying to find a way to read video buffers and use MediaStream to append the buffers to another video tag. But it seems there is no such an api in video tag.
Is there any way to do this? please let me know if you know any solutions.
NOTE: I don't want to use canvas to put image data on it because of performance issues in safari.
"I need to show multiple instances of a video tag on one page...
But it seems there is no such an api in video tag."
You can try using the CaptureStream API (intro). You can also check options in the documentation.
CaptureStream should not care if your video input is a media file or some appended buffers.
Note: In these stream copies...
autoplay is needed for auto-displaying pixels,
muted avoids hearing multiple audios.
This code is tested as working in Chrome (Windows), so let's hope it works in Safari (Apple) too:
<!DOCTYPE html>
<html>
<body>
<video id="vid_01" width="320" height="240" controls>
<source src="myfile.mp4" type="video/mp4">
</video>
<video id="vid_02" width="320" height="240" muted autoplay>
</video>
<video id="vid_03" width="320" height="240" muted autoplay>
</video>
<script>
var streamCopy;
var vid1 = document.getElementById('vid_01');
var vid2 = document.getElementById('vid_02');
var vid3 = document.getElementById('vid_03');
//# check if video is ready to be copied...
vid1.addEventListener("loadeddata", copyVidStream );
function copyVidStream ()
{
if (vid1.readyState >= 3 ) //if ready then copy stream
{
streamCopy = vid1.captureStream();
vid2.srcObject = streamCopy;
vid3.srcObject = streamCopy;
}
}
</script>
</body>
</html>
is it possible to not hardcode the source of an hls file inside javascript but instead put the source in a <source> tag like regular mp4 files?
Use Case
I am running a website with the html5 based Plyr. So far, I have managed to get it running along with having the option of 4 resolutions to choose from, encoded with mp4 files. The video tag looks like this:
<video id="video" controls poster="{URL}/poster.jpg playsinline>
<source src="{URL}/1080.mp4 type="video/mp4" size="1080">
<source src="{URL}/720.mp4" type="video/mp4" size="720">
and so on....
However the issue is if I put a source with an .m3u8 file extension, Firefox complains it cannot play it since it's unsupported. Fair enough, except the hls demo on the github readme shows a codepen where the source is hardcoded in, like so:
<video id="video" controls></video>
<script>
var source = 'https://<url-to-m3u8-here
...
This cannot work in my use-case since as you saw above, I need the multiple sources for resolution switching until Plyr can do this with the manifest natively.
Is there any way to incorporate hls.js into Plyr so I can just specify a video tag like so?
<video id="video" controls poster="{URL}/poster.jpg playsinline>
<source src="{URL}/index.m3u8" type="application/x-mpegURL" size="Auto">
<source src="{URL}/1080.mp4 type="video/mp4" size="1080">
<source src="{URL}/720.mp4" type="video/mp4" size="720">
(I'm working to include the Auto tag)
Hey i guess you need to do something like this:
HTML
<link rel="stylesheet" href="https://cdn.plyr.io/3.5.6/plyr.css">
<video id="player" controls preload="metadata">
<source src="https://mnmedias.api.telequebec.tv/m3u8/29880.m3u8" type="application/x-mpegURL">
<source src="https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_10mb.mp4">
</video>
<script src="//cdn.jsdelivr.net/npm/hls.js#latest"></script>
<script src="https://cdn.plyr.io/3.5.6/plyr.js"></script>
JS
<script>
document.addEventListener("DOMContentLoaded", function(event) {
var player = new Plyr(document.getElementById('player'), {
//debug: true
});
player.on('ready', function(event){
var instance = event.detail.plyr;
var hslSource = null;
var sources = instance.media.querySelectorAll('source'), i;
for (i = 0; i < sources.length; ++i) {
if(sources[i].src.indexOf('.m3u8') > -1){
hslSource = sources[i].src;
}
}
if (hslSource !== null && Hls.isSupported()) {
var hls = new Hls();
hls.loadSource(hslSource);
hls.attachMedia(instance.media);
hls.on(Hls.Events.MANIFEST_PARSED,function() {
console.log('MANIFEST_PARSED');
});
}
});
});
</script>
Before I ask my question I just wanted to say that I'm a noob to Javascript and to StackOverflow in general so I wanted to apologize in advance if this question is too dumb.
Anyways, I'm learning Javascript and right now I'm experimenting with currentTime, but for some reason song.currentTime is returning undefined, and I also can't set the currentTime. Here is my code:
<audio autoplay>
<source src="A.mp3" type="audio/mpeg" id="awesomeness">
Your browser does not support the audio element.
</audio>
<script type="text/javascript">
function myFunction(){
console.log("letting everything preload by waiting 2 seconds");
var song= document.getElementById("awesomeness");
console.log(song.currentTime);
song.currentTime=30;
}
</script>
Here it is in action (look at the console output): http://dancingcats.azurewebsites.net/
The currentTime property belongs to the audio element(Media)
You need is to set it to the audio element not to the source element
<audio autoplay id="awesomeness">
<source src="A.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
This plugin can make a video to play as your site's favicon by using this code:
var favicon=new Favico();
var video=document.getElementById('videoId');
favicon.video(video);
//stop
favicon.video('stop');
here's the Github page.
I tried to make the video play automatically without any input but
unfortunately I couldn't get it to work with my site.
P.s: I'm just a beginner so if anybody have any suggestions or maybe a fiddle to work it out that'll be great!
Did you try using the video.play() feature? See: http://www.w3schools.com/tags/av_met_play.asp
Since I don't have your video to test out, perhaps you could try this?
favicon.video(video.play());
Or adding the "autoplay" keyword to the video tag. See: http://www.w3schools.com/tags/att_video_autoplay.asp
<video id="videoId" controls autoplay>...</video>
Then add an onended event for the video, so that it stops after the video finishes playing. Otherwise, it may try to stop right after the favicon.video(video); function, thus giving the illusion that it's not starting to play at all. It's probably starting & then a few milliseconds later, stopping.
video.onended = function() {
favicon.video('stop');
};
(Mobile Note: From experience with building video players, I've discovered that auto-play won't work on all mobile devices. Apple blocks it due to prevent websites from automatically consuming a user's monthly alloted bandwidth. So mobile users have to press the video play button, to start videos on iPhones & iPads.)
You need to add a <video> to your html
here's a sample code
<video id="videoId" width="300">
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
Video tag not supported. Download the video here.
</video>
EDIT
The secret to getting this working is having the video on the same domain and not loading it from other domain.
Also, you need to add a shortcut icon in the title beforehand
so in your title you need to add this
<link rel="shortcut icon" type="image/png" href="icon.png">
having it in png is the key Here's an example. Have a look https://j99.in/favicon
This may be helpful to you
HTML autoplay Attribute
<video controls autoplay>
sample script
<script>
var vid = document.getElementById("myVideo");
function playVid() {
vid.play();
}
function pauseVid() {
vid.pause();
}
</script>
sample html:
<video width="320" height="240" controls autoplay>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
</video>
For reference:click me