Video file won't play using jwplayer - javascript

I'm not a professional, I'm doing a blind imitation
I created and memorized the m3u8 file
This is what it contains
#EXTM3U
#EXT-X-VERSION:6
#EXT-X-MEDIA-SEQUENCE:0
#EXT-X-TARGETDURATION:3
#EXT-X-PLAYLIST-TYPE:VOD
#EXT-X-ALLOW-CACHE:YES
#EXTINF:3.000,
lo-1.ts
#EXTINF:3.000,
lo-2.ts
However, when I uploaded it to the storage puller and created the link to run it on the web, it didn't work
What should I add and how, for the video to work
This is my link
jsfiddle
<script type='text/javascript' src='https://content.jwplatform.com/libraries/0P4vdmeO.js'></script>
<div id="myElement"></div>
<script>
jwplayer("myElement").setup({
file: "https://okoshiyasu.000webhostapp.com/lo.m3u8",
});
</script>

"I uploaded the .ts file to the same domain and I modified the file like #EXTINF:3.000, lo-1.tsBut the problem remains"
There is something wrong with your file host (maybe in settings?). Instead of giving raw file bytes, it instead gives a text version of the file bytes.
For example, when using Chrome, try to open these links in a new tab:
1) Your host: https://okoshiyasu.000webhostapp.com/lo-1.ts = shows text in tab (wrong result).
2) Github test: https://vcone.github.io/public/demos/Mpeg_TS/lo-1.ts = downloads file (correct result).
Becase the file bytes are downloaded (not written text on page) this mean the HLS player gets the data correctly and can now play the video.
Example playback (where .ts file is served from Github):
https://vcone.github.io/public/demos/Mpeg_TS/VC1_Demo_LO_01.html
Solution:
Find a way to fix these links of your .ts file(s) to auto-download to disk. When that is fixed, then the file is also now playable by HLS players. Maybe you can set file type settings if possible? Right now it acts like you uploaded a web page (or text) instead of binary data (file bytes). Maybe it is not allowed for their free space? Check with 000webhostapp.com Admins or forums.

Related

Pdfmake Uncaught invalid image error even with correctly url

When I try to download PDF file with image generated by pdfmake I got:
Uncaught invalid image, images dictionary should contain dataURL entries (or local file paths in node.js)
I have visited playground on their website but I got there the same error.
Here I paste the example url to image generated by my server. It works fine as you can see (paste it to the browser url).
Finally I posted code:
pdfMake.createPdf({
content:[{image: 'url from paste bin here'}]
}).download();
Honestly I have ran out of ideas.
You can include local JPGs and PNGs from your filesystem if you put them in the ./images folder from the pdfmake root. Then they will be referenced as "./images/filename.jpg" (or .png as the case may be). [EDIT: Also, images won't load above a certain filesize in preview. They will still work on server side rendering. I had a 4.7 MB PNG that would render just fine server side but no matter what, can't get it to render on the client. So just be sure to be using small images if you want to use the dev playground clientside preview feature.)

How to link javascript in html

I am creating browser based video editing tool. I want a user to first download a ~70mb javascript file and store it somewhere on his computer. I want to link that file when my website is opened. How can I achieve that.
EDIT
What i meant is that there are various files like js1.js,js2.js... all sums upto 70mb . So i will offer a zip folder to download and only link js1 or js2 file etc depending on the effects user wish to apply
i am sorry to inform you but i think there is something really wrong with what you are trying to do.
A "solution" would be to just cache the javascript on the user's browser so any subsequent requests parse the cache instead of requesting the resource again from the server.
You should know however that if you are in need to download ~70mb of a javascript file you are doing something wrong. I have a whole web app project that when published the total size is around 60mb, all files required to properly run included, and its a damn big codebase in there.
I find it very hard to believe there is ever a need for a single javascript file to be that big, in any case maybe a simple caching should do the trick
That is actually done automatically. Once you add a <script> tag with a link to a local js file (also stored on the server) the file is loaded automatically.
See HTML <script> src Attribute for more information on that.
You can only reference to js files on the server. Files on the server could look like this:
index.html
somefancyjsfile.js
You can then reference from inside your html file to the js file via the <script> tag.
I'm not sure though if the size is not a bit too much...

Is it possible to cut part of video and upload it on server only with html5 & js

I use Filereader to read local video file (mp4), so I can display it in video tag.
I need to cut part of mp4 file (i.e. from 5 to 10 seconds) and upload it on server.
My current solution: I upload whole video file on server with "from" and "to" parameters, cut it with ffmpeg on server, upload to s3 and return the url video.
Maybe is it possible only with JS/HTML? I found Blob.slice method but i didn't know how to use it to cut video parts.
Thanks!
An mp4 video file is made up of 'atoms' which are like blocks of information or data within a file.
They contain header and metadata about the tracks in the movie (Audio, video, subtitles etc) and also the media data itself.
The concepts are straightforward but an mp4 file is quite involved when you look at one - there is a good example here from the apple developers site (https://developer.apple.com/library/content/documentation/QuickTime/RM/Fundamentals/QTOverview/QTOverview_Document/QuickTimeOverview.html):
If you take a 'slice' of the mp4 file by simply taking bytes from some point in the file to some other point, you can see that you will be missing header information etc depending where you start from, and will also most likely start in the middle of an 'atom'.
Tools like ffmpeg do the hard work to extract and restructure the file when you want to cut part of the video.
There are projects which run ffmpeg in the bowser, but I'm not sure how practical or adopted they are - the one seems pretty popular anyway:
https://github.com/bgrins/videoconverter.js

Starting download of an url shortcut file?

I have created a shortcut file by going to Desktop -> new shortcut and entered link.
Now I have uploaded this shortcut file (*.url) on the
root on my server as shortcut.url
When i directly access mysite.com/shortcut.url, it does not start the download of it but instead show the content of the .url file.
Now on my page where i link to mysite.com/shortcut.url, I have tried the following methods:
How to start automatic download of a file in Internet Explorer?
But noone of them seems to work in Chrome (I though that if it their answers work in IE then Chrome it would too).
How is it possible to start downloading of this type of file, on click?
Generally speaking, a browser will fetch a resource in download mode (rather than displaying directly) if the content type is one that it cannot handle, and no plugins can handle. The easiest way for that to be the case is by using the content type for generic binary files:
Content-Type: application/octet-stream
Basically, configure your web server to use this content type (often called a MIME type) for .url files. How you do that depends on what server you're using.

FakePath issue in Chrome browser

I am making a browser based audio player. So for making a playlist from the local directory I am using :
<input type="file" id="getFile" />
Then I am using a button to confirm the playlist.On clicking the button I am calling a javascript function to change the src of the audio tag to play the new audio file selected in the playlist. I want the exact path of the file from the input file to run in the HTML5 audio player but it starts taking the path as C://Fakepath/filename.mp3. Can someone help me with this.
This is a security feature, by design. You should not be able to read the original file path of a file input into a browser form. File input is for reading file contents only, not metadata like path on the user's file system.
The good news is that you don't need the original file path. You can use FileReader's readAsDataURL to convert the file contents into a base64-encoded data URL and use that as the audio src. To read from #myUploadInput and output through #myAudioElement (also available as a working fiddle):
var reader = new FileReader();
reader.onload = function (event) {
document.getElementById("myAudioElement").src = event.target.result;
};
reader.readAsDataURL(document.getElementById("myUploadInput").files[0]);
if the user is 'building' / creating the playlist based on files they have locally you could do a 'browse' field (s) where they select the local audio files, then take the contents of the field (that Should include the paths to those images), build an array of the count/id, filename.mp3, and path... then, based on what is 'chosen' to play, just reassemble the full local path and play that file.
that would be an approach I would take anyway to see if it would work. the necessary piece here is getting the user to disclose the paths to the audio files... but Im still not 100% sure it would work given the security feature that the earlier commenter posted a link to.
if this were included in an application the user approved for local installation you could just refer to it using the 'application directory' and copy the file to that 'safe location' but since its web based it just really opens up a whole can of worms in terms of a potentially unapproved / authorized web function knowing your local directory structure. good luck, let me know if you find a solution.

Categories

Resources