Play video from javascript file - javascript

I want to make HTML mini-game and insert a short video in the end.
But any video format is not allowed to include in final archive for uploading this game (only .html, .css, .js, .jpeg, .jpg, .png).
Is it possible to hardcode video file (mp4) directly into .js file anyway?
For now I am thinking of few solutions:
Just change extension of video.mp4 file to video.js and then try to set proper MIME type to play this video in HTML. Is it even possible?
Covert video.mp4 file into Json data and insert this data into .js file and then play somehow. I found this converter but it seems doesn't work and I can't find any info how to play converted to Json video in HTML.
Search for WebAssembly solutions.
Is there some reliable way to embed video into javascript file?

You can use base64 encoded video
<video>
<source type="video/mp4" src="data:<your encoded video>" />
</video>

Related

How to use JavaSript with Flask to play mp3?

I'm trying to play an mp3 file from JavaScript in a Flask framework.
Inside of the js file, I have:
let audio = new Audio('bell.mp3');
audio.play();
I'm getting a 404 error so it can't find the mp3 file.
My project folders look like this:
main.py
templates
home.html
Static
Scripts
script.js
bell.mp3
I also tried to put the bell.mp3 file in templates and in the root folder, but it still can't find it. How do I access it through javascript with the flask framework? I just found out I have to put js and css into a Static folder for flask and I still don't really know why so I'm wondering if I have to do something else weird like that.
You don't need Flask or JS to play mp3, it's built in browser. You can use HTML to serve a player for your audio https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio
<audio src="{{ url_for('static', filename='Scripts/bell.mp3') }}" autoplay>
Download OGG audio.
</audio>
Try to paste this code in your html file (it isn't useful if you have firefox or opera):
<audio src="../Static/Scripts/bell.mp3" controls="controls">

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

How to extract all the current video files and its address in the web page with js?

var imgs=document.images.length;
It can extract all the images on the web page.
How extract all the flv files whose suffix is flv such as sample.flv in the web page with js?Not all the flv files on my local directory but web page.
The plugin Video DownloadHelper in firefox can get the current mp4 file.
Why my js code can't do the same task?
var Links = document.querySelectorAll('a[href$=".mp4"]');
console.log(Links);
How to extract the current video files with js such as the plugin Video DownloadHelper in firefox?
Yahoo Movies use blob stream to transfer video data. There are no direct mp4/flv links anywhere, nor can you get such links directly. The src of the <video> tag refers to a blob stream link:
<video class="yvp-html5-video" preload="" id="2413371376" src="blob:https://www.yahoo.com/1dfafd99-a1ff-4cc8-bcff-255e69db9977"></video>
When you hit to download MP4 from Video DownloadHelper, the plugin actually reads the blob stream and writes it to disk in an MP4 file. It doesn’t download a MP4 file. If you try to Copy URL, you’ll get something like this to your clipboard:
https://roarack01.vpg.cdn.yimg.com/yahoomovies/61fb473f-04a2-381e-b2ae-9496dfba5e66_VYtMtix1DscECbXMT9tHT7yf2P9BZF-mRCMjBejFgALFHl7NSm1ZXPOMICAOr949v2xUgEASYLw-_1_0_vtt.m3u8?a=yahoomovies&ib=sapi&m=application%2fvnd.apple.mpegurl&mr=0&ns=c+i+ci+cii&vid=61fb473f-04a2-381e-b2ae-9496dfba5e66&x=1479599999&s=370695a7063b6aae06fb7f537c85773a
You can record a blob stream, but it’s not an easy task.
For more details on video blob stream, check these links:
What is blob in the <video src=blob:url>?
Export HTML5 blob video to MP4
W3C Media Source Extensions
A URL for Blob and File reference
If I'm understanding correctly you want to look for all the links which have an associated .flv.
If you want this, you can use querySelectorAll and select all the links ending in .flv using the css selector $=.
var flvLinks = document.querySelectorAll('a[href$=".flv"]');
to get all flv files of a directory, please try the following code -
var files = fs.readdirSync("YOUR_DIRECTORY");
var path = require('path');
for(var i in files) {
if(path.extname(files[i]) === ".flv") {
//do your desired task here
}
}
Hope it helps..:)
You can inspect all video requests on Chrome -> Networks tab in Media sub tab.

Replacing audio track of the video

I have a video file "MyVideo.mp4" (*.mp4 is not required. It can be in any others formats) and I have an audio file "MyAudio.mp3".
Does anyone have any ideas how to replace an audio track from the video on the audio file "MyAudio.mp3"?
Demultiplexing + remultiplexing ("splitting" + "recombining") is something you would like to do on server side using a software like FFMpeg or similar.
Doing this is JavaScript will be non-trivial as you would have to parse and save the file formats manually (you must be able to parse all formats you'd support).

HTML5 and PHP: Play base 64 encoded video file

I am trying to play a base 64 encoded MP4 using the HTML5 data URI. For some reason, the video won't play. The approach works fine for image files (jpeg and png), however for some reason it won't work for media files.
On the client side I have:
document.getElementById("video_holder").src = "data:video/mp4;base64," + xmlhttp.responseText;
HTML something like:
<video controls> <source type="video/webm" src="" id="video_holder" />...
I am fetching the file using PHP and base64 encode it before sending it to the user:
$file = file_get_contents($path);
echo chunk_split(base64_encode(trim($file)));
I also tried:
$file = file_get_contents($path);
echo base64_encode(trim($file));
Any suggestions?
I would say you first need to decode in JavaScript your Base 64 file. This is explained here but some browsers do not support it.
I would then create a Blob object from the decoded file and then create an objectURL from the blob and push this objectURL as the src of the HTML5 video tag.
I have not done this yet but this is how I would do it if I had to. Why do you need to base64 encode your video file in the first place? This can create overhead and increase processing time. If you need encryption a DRM solution would be better.

Categories

Resources