Develop Reference

Not fully downloaded blob: videos

Hi developers i have some problems with blob videos for long time.So I think i finally got hierarchy of blob video that something like reads part of video from server and sends to client.But today i encounter some other problem.Firstly I searched from where comes this blob data to player and some articles gave me useful information for to refer to the links for blob that in inspect section of web page Network section on Chrome.
In this way i saw that the blob video downloads every few seconds with different urls but with little modification.The site was : https://www2.1movies.is/movie/xxxxxxxxxxxxx.html
Blob request refers to urls in a short time with only change of number like that:
s7--p.ex/ample--{seq-1}-xxxx.xxxxxxx
in this exapmle only seq 1 changes frequently and number increasing.
So i used python to download this video by parts in normal mode (without asyncio , or with another sophisticated ways).I did't know how many parts consists video and i checked manually untill it will give 404 error.I did't saved code i used cmd ,therefore i will give code with example.
import urllib as ur
def downloader(x):
"Imagine we will call downloader with given seed url
for example site.com/seq-{}-signature=xxxxxx
in there program will change number with format like that
site.com/seq-1-signature=xxxxxx
site.com/seq-2-signature=xxxxxx and so on.."
for i in range(1,2000):
try:
"video will created with given namber like -> : 1.ts , 2.ts"
ff=open("{}.ts".format(i),'wb')
"and part of video will be read with url and write to file"
ff.write(x.urlopen(x.format(i)).read())
ff.close()
except Exception:
continue
>>>downloader('examp.ple/seq-{}-ddadadaad')
so program worked , but when i attempt to combine all video in one then i saw all parts did't loaded fully , fr example in network section 215th part show 300kb but downloaded file is 298kb.Therefore video playing like interrupted..
So maybe there are have other ways to download this kind of videos but if site works with this way , why didn't I succeed?

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

Audio Player Files not loading online but works locally

Hi ive done a project for university of creating a web application. I added in an audioplayer, and it worked perfectly fine locally, but when I added it to my web app online i get the error:
GET https://mitul106.000webhostapp.com/app5/public_html/app5/components/G-Eazy%…20Kehlani%20-%20Good%20Life.mp3/G-Eazy%20&%20Kehlani%20-%20Good%20Life.mp3 404 ()
Uncaught (in promise) DOMException: Failed to load because no supported source was found. music:1
The directory path is correct im not too sure what else the issue could be. If you need any more of me feel free to ask and thankyou in advance! :)

You need to remove all spaces from the file names and replace then with underscores (_) for working with them on the web.
So if your mp3 file is Teri Meri Kahani.mp3 rename it to teri_meri_kahani.mp3 .
Also remove spaces from all the directories if any in which you store songs online.

As per standards, src attribute should contain a valid URL. Since space characters are not allowed in URLs, you have to encode them.
You can write:
src="Sound%20Awesome.mp3"
but NOT
src="My-Sound%20Awesome.mp3"
Check your Sound File name - It has "-" in it.
Path to the audio file is not correct in your case. Try changing it to:
https://mitul106.000webhostapp.com/GoodLife.mp3

Spaces are not supported in file/directory names when using them in websites.
So just remove the spaces or replace them by a underscore(_)
I hope I can help:)

videojs multiple sources of same type but different paths

I am trying to use videojs with cordova, which works fine. I would like to have multiple sources of a file declared via JS. The idea is the a video file could "potentially" be in multiple locations, but will only actually exist in one of them. To my understanding, if videojs cannot play a source, it trys the next. In the below DOES NOT WORK example, it should ignore the first source because the file does not exist, but does not seem to try the 2nd source eventhough the file exists in that directory. Per the videojs docs http://docs.videojs.com/docs/api/player.html#Methodssrc it allows an array, but does not say if it allows multiple of the same type.
cordova.file.dataDirectory = the files directory of my app, we will assume that myvideofile.mp4 will always exist in this path.
WORKS - assuming myvideofile.mp4 actually exists in directory
example_video_1.src(
{type:"video/mp4", src:cordova.file.dataDirectory+"myvideofile.mp4" }
);
DOES NOT WORK
example_video_1.src([
{type:"video/mp4", src:"/some/directory/file/is/not/in/myvideofile.mp4" },
{type:"video/mp4", src:cordova.file.dataDirectory+"myvideofile.mp4" }
]);

jQuery/JavaScript read image/files from path file

I have a reference how to load an image from a file:
http://jsfiddle.net/eD2Ez/31/
but I don't know how to manually load the image by inputting or giving a string
parameter that contains path file (e.g. C:\myImage\img12.jpg)
in the link, the image is directly load from the file dialog.

Indeed, to my knowledge there is no established or even mildly known way to load local files programmatically due to security policies.
Aside from that you may want to use the onload handler on img to be sure that the image is loaded when you draw it on canvas. At the moment in some cases where the image is too big or the computer is slow you may not get the image rendered.
Check demo: http://jsfiddle.net/eD2Ez/38/
Experimental / Future
However, there could be a light on the horizon. There is something called FileSystem API in the works but didn't work for me (although it should).
Firstly the FileSystem API is currently implemented under vendor prefix on Chrome version 21+.
Also you have to use the flag --allow-file-access-from-files when you launch Chrome.
But even with all this, I still didn't manage to make it happen with Chrome v21 and still get SECURITY_ERR.
Check the "demo": http://jsfiddle.net/MQFGd/2/
Sources:
MDN FileSystem API
W3C FileSystem API
FileSystem API tutorial

$('<img src="'+img.src+'"/>').insertAfter('#cvs');
Here is demo http://jsfiddle.net/eD2Ez/32/