I was trying to add subtitles to my Live HLS stream using this tutorial
1: http://hlsbook.net/how-to-add-subtitles-to-a-live-hls-stream/ , also read all the issues on internet but didn't succeed.
The issue is that streaming works , and browser gets the video segments and subtitle segments (webvtt), then Player starts the video , but doesn't show the subtitles (even if it is selected by default), there no errors in console.
here is my master manifest file :
#EXTM3U
#EXT-X-MEDIA:TYPE=SUBTITLES,GROUP-ID="subs",NAME="English",DEFAULT=YES,AUTOSELECT=YES,FORCED=NO,LANGUAGE="en",URI="subslist/subtitles.m3u8"
#EXT-X-STREAM-INF:BANDWIDTH=1118592,CODECS="mp4a.40.2, avc1.64001f",RESOLUTION=640x360,SUBTITLES="subs"
prog_index.m3u8
Video Playlist (prog_index.m3u8):
#EXTM3U
#EXT-X-VERSION:3
#EXT-X-MEDIA-SEQUENCE:2
#EXT-X-TARGETDURATION:5
#EXTINF:5.0,
seg.ts
#EXTINF:5.0,
seg.ts
#EXTINF:5.0,
seg.ts
subtitles list (subtitles.m3u8) :
#EXTM3U
#EXT-X-VERSION:3
#EXT-X-MEDIA-SEQUENCE:2
#EXT-X-TARGETDURATION:5
#EXTINF:5.0,
subtitleSeg1.webvtt
#EXTINF:5.0,
subtitleSeg2.webvtt
snapshot of player
browser's network
Related
I have two live videos feeding an encoder which creates H.264 chunk files and an HLS manifest which is being served by an apache web server.
A browser page using video.js shows a player. Pressing "play" on the browser properly plays the video. It works well.
However, if we change video sources (by flipping the switch in the picture below), there is a considerable delay (10 seconds) before the new content is displayed in the player. I'd like to get that to 3 seconds.
It appears that video.js and/or the HTML5 player in browser is buffering that amount of content. (if you delete the files on the web server, kill apache, or even pull the ethernet cable, the video keeps on playing!)
A button on the web page controls the switch. When clicked, I would also like to clear or reset the player so that it immediately re-reads the index.m3u8 manifest and downloads the new chunks.
So far, haven't found anything promising searching the internet or in the video.js API docs. There are lots of articles on API calls for fetching the current buffer percentage but cannot find any API for clearing it altogether.
Any ideas?
The encoder is set for 3 second chunks and the playlist depth is set for 10 entries.
I had a similar problem. Since i could not find a reliable API for this, i came up with a rather dirty workaround to clear the buffer:
var ctime = player.currentTime();
player.currentTime(0);
player.currentTime(ctime);
This currently works for me in all major browsers.
I'm running a VueJS application that displays a full screen story of videos. I don't create as many tag as number of media in my story : I'm just changing component video sources each time I play a new video.
But it looks like Safari (Desktop & mobile) still does not cache HTML video once loaded : when I'm playing again a previous media, Safari is downloading again the asset. Instead of getting from cache like Chrome does.
The same issue has already been reported here but sill no correct answer.
Safari even stops downloading the final bytes video (producing a sort of timeout) when we go back and forth quicky in the story, so the story looks stuck.
Here's an example link.
Does anyone know a good alternative that avoids re-downloading video data at each play on Safari ?
Partial solution
Found myself a workaround that works pretty well if video is small size - all video are less than 3Mb in my case.
The trick is to use js fetch API to download full video, then stream it into video tag.
const videoRequest = fetch("/path/to/video.mp4")
.then(response => response.blob());
videoRequest.then(blob => {
video.src = window.URL.createObjectURL(blob);
});
Contrary to video src attribute, fetch API will get video data from cache if the same video was already fetched before.
Here a codepen demo that can be tested in Safari desktop/mobile (when NOT in private mode).
Pro : Video are now pulled from cache in Safari !
Con : You can't start the video until full data has been downloaded. That's why this solution can be used only for small video (like < 5Mb), else your users may wait a while before being able to play the video.
Hi I am developing Live TV and Radio mobile app. So I wanted to play multiple type video file in one player. Mostly Application play live streaming Video and audio files. I also wanted to play YouTube video also through player. So is there any library or sdk available.
For video and audio files you can use GUIPlayer.
For playing youtube video you have to use Youtube Player.
In single custom you have to use the respected player
I am using rtmp to broadcast streams to the server and using HLS to stream the video to my device.
Is there a subtitle protocol that I can update the subtitle on real time,
for example, there is a subtitle file in server, I can keep write into that file and my player also can keep read from that file.
I know WebVTT works for recorded streaming video, but will it work for live streaming video? Can I link my player to the webVTT file and I can just update the subtitle by keeping writing to it?
You can use WebVTT to add subtitles to a live HLS stream. You do this by using a live subtitle playlist. It works just like a live playlist - you add and remove entries from it as time progresses.
First create a master playlist and add a reference to your subtitle playlist (subtitles.m3u8) to it. Here’s a (simplified) example:
#EXTM3U
#EXT-X-MEDIA:TYPE=SUBTITLES,GROUP-ID="subs",NAME="English",URI="subtitles.m3u8",LANGUAGE="en"
#EXT-X-STREAM-INF:BANDWIDTH=500000,RESOLUTION=1920x1080,SUBTITLES="subs"
prog_index.m3u8
The next step is updating the subtitle playlist during the live broadcast. Let’s say your subtitle playlist looks like this initially:
#EXTM3U
#EXT-X-TARGETDURATION:10
#EXT-X-VERSION:3
#EXT-X-MEDIA-SEQUENCE:1
#EXTINF:10,
1.webvtt
#EXTINF:10,
2.webvtt
#EXTINF:10,
3.webvtt
Notice that the #EXT-X-ENDLIST tag is missing from the playlist. This will cause the player to keep retrieving the playlist.
Then some time later (segment duration) it will look like this:
#EXTM3U
#EXT-X-TARGETDURATION:10
#EXT-X-VERSION:3
#EXT-X-MEDIA-SEQUENCE:2
#EXTINF:10,
2.webvtt
#EXTINF:10,
3.webvtt
#EXTINF:10,
4.webvtt
And so on. You’ll probably have to write some custom code to update the subtitle playlist.
is it possible to play a m3u8 file using video.js on any devices?
So far, I am only able to play them on Android or IOS. Want to play them on PC as well.
This is what I am using but no luck.
Thanks for your help
<source src="http://www.domaine-name.com/name/playlist.m3u8" type='video/mp4'>
From Wikipedia:
An M3U file is a plain text file that specifies the locations of one
or more media files. The file is saved with the "M3U" or "m3u"
filename extension. Each entry carries one specification. The
specification can be any one of the following:
an absolute local pathname; e.g., C:\My Music\Heavysets.mp3
a local pathname relative to the M3U file location; e.g. Heavysets.mp3
a URL.
As M3U only stores the multimedia items locations, you should parse it and play them using the proper audio/video playback lib.
Take a look at this question
EDIT: The link in the comment points to another m3u, you just should get the link to the multimedia files:
Content of first m3u:
#EXTM3U
#EXT-X-STREAM-INF:PROGRAM-ID=1,BANDWIDTH=613798
http://tveurope1.zion3media.com:1935/demoweb1/mystream/playlist.m3u8?wowzasessionid=506379083
When you follow that link you will get a playlist like this:
#EXTM3U
#EXT-X-ALLOW-CACHE:NO
#EXT-X-TARGETDURATION:10
#EXT-X-MEDIA-SEQUENCE:1343
#EXTINF:11,
media_1343.ts?wowzasessionid=506379083
#EXTINF:12,
media_1344.ts?wowzasessionid=506379083
#EXTINF:9,
media_1345.ts?wowzasessionid=506379083
Example of multimedia resource from playlist:
http://tveurope1.zion3media.com:1935/demoweb1/mystream/media_1343.ts?wowzasessionid=506379083