I want to stream a transport stream file on a HTML player. Is there a way to implement it?
I have tried these following approaches to play the TS file-
a) Put it in a video tag:
I simply wrote a video tag
But it showed me a blank screen.
b) I tried it with iframe tag:
I wrote a simple tag:
It actually downloaded the file but screen turned blank.
c) I used HLS player for showing the ts file
The HLS (hls.js) validated the file. However it gave me the "manifestLoadError".
Can anyone helpe me with this HLS error?
Or suggest me another way to show this TS file?
Browsers can not play ts. You need to convert to iso/fmp4 before playing.
Related
I am building a web app that contains a file preview system.
It works fine on PDFs, text files, pictures of all type, and so forth. But what it can't do is play videos or audio files (.mp4, .mp3, etc; I don't have any other formats handy).
I am suspecting that it's because an image or text is loaded all at once, but audio and video tend to stream, which isn't behaving here. Interestingly, it does work in Firefox... but not Chrome.
Here is the relevant code:
function loadFile(){
var pvurl = URL.createObjectURL(document.getElementById('file').files[0]);
if (source_name.substring(".mp4")>1){
pw.createElement("video");
}
pw.src=pvurl;
pw.onload=function () {URL.revokeObjectURL(pvurl);};
URL.revokeObjectURL(pvurl);
}
<input type="file" class="file" id="file" onchange="source_name=this.value;">
<iframe id="preview" class="hidden mainWindow" style="height:100%;"></iframe>
I get two error messages from this. Meanwhile, the iframe at least appears to start loading the video or audio (and I get the video loading screen and spinner), but just stops trying after a second or two.
Resource interpreted as Document but transferred with MIME type video/mp4: "blob:null/895c8ed2-49f1-4160-b2f4-b6904068d5ad".
blob:null/895c8ed2-49f1-4160-b2f4-b6904068d5ad:1 Not allowed to load local resource: blob:null/895c8ed2-49f1-4160-b2f4-b6904068d5ad
I have tried removing the revokeObjectURL line (in case it revokes it before it's loaded or something--and does that actually save any memory? Is it loading from file or buffering?), but that doesn't seem to actually fix the problem, and I get the same errors. What is going on here? It also seems to be seeing the MIME type, but I can't find a guide on how to get the code to see it. I'd like to get rid of the warning or perhaps find a way to handle audio or video types differently, if it can't work in an iframe (I don't see why that would make a difference, but...).
If you also have any information on exactly how this works, I'd also appreciate it.
The app does all its processing clientside in Javascript, so I'm rather interested in how this URL access method compares to the FileReader.readAsArrayBuffer() method I'm using for everything else (I do need to read the source file at a byte level several times, so if the URL method is a pipe that's a no-go).
I'm trying to figure out how to provide an endless video stream using Java and video.js. So on the backend side, I hold a playlist of one .m3u8 file and couple .ts files. And my flow consists of the following steps:
Give .m3u8 text on UI. .m3u8 endpoint screenshot
Start the flow on the front-end side by video.js lib. video.js part screenshot
Video.js requests for a single .ts file that was indicated in .m3u8 file. ts endpoint screenshot
On the backend with the help of a sheduler, I change the context state streamContentContext.setCurrentChunkId(streamContentContext.getCurrentChunkId() + 1), and when video.js realizes that the only ts file is over, he tries to update .m3u8 file. At this moment, the index of ts is already updated by the scheduler and it should request /ts/2 endpoint.
THE PROBLEM IS: all subsequent .ts files on the front-end side simply cannot be played, maybe there should be some kind of attribute or event that will start adding a new piece of video to the previous one.
UPD: after I read this article (https://developer.apple.com/documentation/http_live_streaming/example_playlists_for_http_live_streaming/live_playlist_sliding_window_construction) it all became clear to me that it’s worth removing some attributes from .m3u8 file, so I left only #EXTM3U, #EXT-X-VERSION:3, #EXT-X-TARGETDURATION:11, #EXT-X-MEDIA-SEQUENCE: + streamContentContext.getCurrentChunkId()
browser screenshot
I'm trying to write a script to automate the downloading of english audio files from a website, using Python.
The audio plays/loads on click, but I don't know how to "capture" the file as it loads and download it. I don't know javascript language.
The website: https://context.reverso.net/traduzione/inglese-italiano/pull+the+rug
For example, the first play button:
<button data-id="OPENSUBTITLES-2018.EN-IT_13515521" class="voice icon
stopped" title="Pronuncia" data-lang="en"></button>
loads this URL:
https://voice2.reverso.net/RestPronunciation.svc/v1/output=json/GetVoiceStream/voiceName=Heather22k?inputText=cHVsbCB0aGUgcnVnCgoKWW91IGp1c3QgbGV0IGhlciBrbm93IHRoYXQgeW91IGNhbiBwdWxsIHRoZSBydWcu
Copying that into the browser, an audio file loads that can be downloaded manually. I want to download it automatically.
Thanks!
Resolved. The url inputText is generated encoding in base64 the written translation.
I have worked with images, they seem to do well when you use the downloadURL() to embed them in html tags,but the video doesn't work.
I tried using the video and iframe tag in html but it doesn't work. From what I understand, is that incoming file is not a video but a general file, it downloads with ".mp4 extension. Please suggest what should I do. I am working on a small time project where users can upload videos and watch other user's video.
Use downloaded Url to play video in chat.
In this code, i have passed a video URI to which I want to get the downloadable URL and then set the source of the video element.
Note:- Remember to put the controls property to video tag.
this.storage.refFromURL(videoUri).getMetadata().then(function(metadata) {
console.log('metadata',metadata.downloadURLs[0]);
vidElement.src = metadata.downloadURLs[0];
});
I'm creating an iphone webapp in dashcode for the first time and I can not figure out the code for embedding a video into the webapp.I have an html file and have a few pages it switches between but I need to create a function in javascript so when I click a button that it will pull up a video I in quicktime. Any sample code or thoughts? If anyone could give me some samplecode I would appreciate it
You could try something like this (completely untested):
function showVideo(vidFile) {
var vidElem=document.createElement("video");
vidElem.setAttribute("src", vidFile);
vidElem.play();
}
And then invoke it like this:
showVideo("your_movie_file.mov");
create your .html file
embed the following code :
<video src="your_movie_file.mov" controls="controls">
your browser does not support the video tag
<video>
upload your file to your webserver.
test your files. (make sure your movie file in your webserver too...