I am using videoJS player with m3u8 list loaded dynamically from the server. The list has #EXT-X-ENDLIST at the end so it shouldn't be interpreted as LIVE stream. However, player shows LIVE button and the totaltime is negative.
See the screenshot:
https://adamant69-my.sharepoint.com/:i:/g/personal/tvbegovic_adamant69_onmicrosoft_com/EYPU0uKR8ypCtf9L4Z6FFAYBq1YPKDE95z5KD0lBLIHdcw?e=12C0is
The link to m3u8 list:
http://accessb.streamsink.com/hls-africa/tv1/GetVODClip.m3u8?date=2019-09-05&start=14:00:00&end=15:00:00
HTML:
<video-js id="wp_video1" class="video-js vjs-default-skin" controls data-setup='{"overrideNative": true,"responsive": true}'></video-js>
Player is given src attribute dynamically in the code
player.ready(() => {
player.src({
src: `${$scope.selectedChannel.ArchivePath}/GetVODClip.m3u8?
date=${mClipFrom.format('YYYY-MM-DD')}&start=${mClipFrom.format('HH:mm:ss')}&end=${mClipTo.format('HH:mm:ss')}` ,
type: 'application/x-mpegURL'
});
});
Is there a problem with my m3u8 list or should I configure player differently?
Related
I want to make a video file available via an ASP.NET Core web service.
If I use:
[HttpGet]
public IActionResult Get()
{
return File(#"videofile.avi", "video/webm");
}
And access the video with vlc media player or a webpage like that:
<html>
<body>
<video id="video" preload="auto" width="320" height="240" controls>
<source src="http://localhost:39589/mycontroller" type="video/webm"/>
</video>
</body>
</html>
It seems that the video starts only when the complete file is transferred. I want the video to be transferred asynchronously, so that the video starts although it is not complete transferred.
Background: the video is constructed on the fly and will be in unlimited length (it will show the current time, so video is generated realtime in memory and should be transferred to web page every x frames). The goal is a webpage with a video which shows the current time live and infinite.
Edit: I got it working, I use a PushStreamContent object now.
When I use a mp4 (h264 codec) video now, the video starts playing although the complete video is not yet transferred (good, that is what I want).
But this seems not to work with a webm video (vp9 codec). Here the html video objects waits until the whole file is transferred. Is there a connection between codec and the behavior of html video player (e.g. if it starts playing although the file is not yet complete)?
You can try to use enableRangeProcessing.Here is a demo:
Action:
public IActionResult GetVideo()
{
var f = PhysicalFile(Path.Combine(Directory.GetCurrentDirectory(), #"wwwroot\video", "1.mp4"), "video/webm", enableRangeProcessing: true);
return f;
}
View:
<video id="video" preload="auto" width="320" height="240" controls>
<source src="https://localhost:44300/B/GetVideo" type="video/webm" />
</video>
result:
I am using Videojs version 7.6.6. It will not play a html5 video if the src is a blob URL. It will load the video time however, but will not play. I get this warning, and then it loads forever:
VIDEOJS: WARN: Problem encountered with the current HLS playlist. Trying again since it is the only playlist.
This is the way my code runs:
<video id="my_video" class="video-js vjs-matrix vjs-default-skin vjs-big-play-centered" controls
preload="none" width="640" height="268" data-setup="{}"></video>
<script type="text/javascript" src="/js/video-766.min.js"></script>
<script>
fetch("https://server/hls/index.m3u8").then(result => result.blob())
.then(blob => {
var blobURL = URL.createObjectURL(blob);
var player = videojs("my_video");
player.src({ src: blobURL, type: "application/x-mpegURL" });
}
);
</script>
If I try it without a blob, just a regular URL to the index.m3u8 file, then it works. So this is a problem with the creation of the blob URL I think. This works, the video starts playing:
<video id="my_video" class="video-js vjs-default-skin" height="360" width="640" controls preload="none">
<source src="https://server/hls/index.m3u8" type="application/x-mpegURL" />
</video>
<script>
var player = videojs('my_video');
</script>
I have searched for this issue and found a lot, but none of it helps me. Am I creating the blob wrong?
The object URL that is generated for the blob will start with file:// protocol if I'm not wrong. Browsers doesn't let you load data with file:// URL. I ran into a similar problem so I created a simple server on my app which returns the requested file over https:// .
The reason why your index.m3u8 is running because it is served over https protocol
I am playing with video.js. Here is my code:
<link href="//vjs.zencdn.net/5.4.6/video-js.min.css" rel="stylesheet">
<script src="//vjs.zencdn.net/5.4.6/video.min.js"></script>
<video id="example_video_1" class="video-js vjs-default-skin" style="margin-left:auto;margin-right:auto;"
controls autoplay preload="auto" width="1300" height="800"
data-setup='{}'>
<source src="/test.webm" type="video/webm" />
<p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that supports HTML5 video</p>
</video>
The above code was literally copied from the tool's website (except the video and autoplay):
http://docs.videojs.com/docs/guides/setup.html
My movie is played in both Chrome and Firefox. If I want to see something later in the movie, I am able to drag the dot in the progress bar to the point I want and the movie starts just there. However, when doing so in Chrome I got error:
A network problem caused the media download to fail part-way.
You can do it with javascript
videojs("last", {}, function () {
var myplayer = this;
myplayer.currentTime(s); // s being to time in second you want
}
Remove the data-setup attribute from the html tag and put what you had in second argument.
The first argument is the id of the video(be sure it has never been
initialized)
The second is optional it is what you want to have in data-setup
The third is a function that you want to call when it is
initialized.
The following code sets up video.js and listens on loadedalldata event to start playing and listens on ended event to load another file. If an flv plays first, I get loadedalldata event for loading the flv, then it plays, I get the ended event, the mp4 loads, but I never get the loadedalldata event.
If the mp4 plays first, I get two loadedalldata events, the mp4 plays, I get the ended event, the flv loads, I get the loadedalldata event, the flv plays, I get the ended event, the flv loads again - but I never get the loadedalldata event.
If both vids are mp4, it plays in a loop (with two loadedalldata events each time).
So it seems, something about the flv playing disrupts the next loadedalldata event.
i event tried adding a .on('loadedalldata') event in the ended handler. No change.
Any suggestions??
<html>
<head>
<link type="text/css" href="/js/video.js/video-js.css" rel="stylesheet" />
<script type="text/javascript" src="/js/jquery/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="/js/video.js/video.js"></script>
<script>
videojs.options.flash.swf = "/js/video.js/video-js.swf"
$(document).ready(function () {
var playIt = function playVid() {
alert("Event");
this.play();
}
videojs("video1", {}, function(){
this.on('loadedalldata', playIt);
this.on('ended', function() {
this.src({ type: "video/mp4", src: "/files/test.mp4" });
this.load();
});
this.src({ type: "video/flv", src: "/files/barsandtone.flv" });
this.load();
});
});
</script>
</head>
<body>
<div id="div1">
<video id="video1" class="video-js vjs-default-skin"></video>
</div>
</body>
</html>
It looks like that's a bug in Video.js when playing additional sources through Flash. With Flash, progress events are created manually in javascript as opposed to being able to use the native events like with html5. This line of code turns the events off as soon as the buffer reaches 100%, but then never resets itself on a later source load.
https://github.com/videojs/video.js/blob/ce18a9af740eb2a01f2b0efe2d10299de32818ce/src/js/media/media.js#L192
It should restart these events when the loadstart event is fired again by the flash player, signaling a new source has been loaded. You should submit an issue on the video.js repo for this. https://github.com/videojs/video.js/issues/new
I am looking fore some code allowing me to launch automatically a video after another one.
I'am using the great video.js library, which has a quite complete API. I found some snippet to get an event listener working at the end of the 1st video, but then I cannot launch the second one.
This is working, displaying an alert at the end of the 1st video :
_V_("intro").ready(function(){
this.addEvent("ended", function(){
alert('foo');
});
});
And this is also working, launching a video in fullscreen on page reload :
_V_("leader").ready(function(){
var leader = this;
leader.requestFullScreen();
leader.play();
});
But I can't get the 2nd video launching in fullscreen at the end of 1st video...
Last subtility, I would like to entirely build the 2nd video with javascript, not having to write it and just hiding id with CSS.
Thank you folks !
Elliot
You can simply use the provided 'src' method in the Video.js API, if you want to play a second video right after the first one finishes it would work like this:
_V_("intro").ready(function(){
this.addEvent("ended", function(){
this.src({ type: "video/mp4", src: "http://path/to/second/video.mp4" });
});
});