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>
Related
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>
I want to pass javascript variable as src to html5 video so that the video changes dynamically based on the js variable value.
However I am not able to achieve it
<script type="text/javascript">
var path = "/api/Videos/mp4/";
var filename = '#ViewBag.filename';
var fullPath = path.concat(filename);
document.getElementById('fullPath1').src = fullPath.toString();
</script>
<p><script type="text/javascript">document.write(fullPath)</script></p>
<video width="480" height="320" controls="controls" autoplay="autoplay">
<source src="fullPath1" type="video/mp4">
</video>
Please help me to get this working. Thanks!
you are looking for an element by id
document.getElementById('fullPath1').src = fullPath.toString();
but you haven't yet define any id:
<source src="fullPath1" type="video/mp4">
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();
On IOS When I download some video using cordova filetransfer plugin it doesn't plays(absolute url like: file:///var/mobile../videos/1.mp4), however when I wrap the video into the app it works(relative url like: "videos/1.mp4").
On android both works.
Script:
var fileTransfer = new FileTransfer();
var uri = encodeURI("http://some.server.com/download.php");
fileTransfer.download(
uri,
fileURL,
function(entry) {
generateMarkup(entry);
},
function(error) {
handleError(error);
},
);
The generateMarkup() function creates the markup as it recommends by w3c http://www.w3schools.com/html/html5_video.asp
<video width="320" height="240" controls>
<source src="file:///var/mobile/.../movie.mp4" type="video/mp4">
<source src="file:///var/mobile/.../movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
I have written helpers to print out all the files stored inside the app sandbox, so the files are there, the path is correct, but it doesn't play.
After two days of digging found this page: https://issues.apache.org/jira/browse/CB-6051
what helped to figure out that iOS 7.x? can't handle local absolute path in the source element. (Mine: iOS 7.0.4) It just gives a play icon crossed with a line.
This is not working:
<video width="320" height="240" controls>
<source src="file:///var/mobile/.../movie.mp4" type="video/mp4">
<source src="file:///var/mobile/.../movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
However this one works finally...
<video width="320" height="240" src="file:///var/mobile/.../movie.mp4" controls>
Your browser does not support the video tag.
</video>
Hope it helps someone.
Basically what I'm trying to do is make the video redirect to a different web page after it's finished playing (very similar to what YouTube uses for Playlists). I've tried doing a bit of research before asking this type of question but nothing seems to be working out for me.
Here's the code:
<video id="example_video_1" class="video-js vjs-default-skin"
controls preload="auto" width="854" height="480"
poster="images/thumbnailbackgrounds/AE-DageSide.jpg"
data-setup='{"example_option":true}'>
<source src="files/Clip1.mp4" type='video/mp4' />
</video>
Since it looks like you're using Video.JS for this, you should have a look at their docs:
https://github.com/videojs/video.js/blob/master/docs/index.md
Specifically, the API section:
https://github.com/videojs/video.js/blob/master/docs/api.md
In the "Events" section, it says:
ended
Fired when the end of the media resource is reached. currentTime == duration
So you'd need to get a reference to your player (also on that page):
var myPlayer = videojs("example_video_1");
and then listen for the ended event, and redirect from there:
function endedFunction(){
window.location = 'http://www.example.com/';
}
myPlayer.on("eventName", endedFunction);
As borrowed from this answer, try the following. And you don't need video.js for this.
HTML
<video id="example_video_1" class="video-js vjs-default-skin"
controls preload="auto" width="854" height="480"
poster="images/thumbnailbackgrounds/AE-DageSide.jpg"
data-setup='{"example_option":true}'>
<source src="files/Clip1.mp4" type='video/mp4' />
</video>
JavaScript
<script>
var video = document.getElementsByClassName("video-js");
// Or select element by HTML tag
// var video = document.getElementsByTagName('video')[0];
video.onended = function() {
window.location.href = "www.yoururl.com";
}
</script>
Ought to work.