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.
Related
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>
I used ajax to fetch a mp3 file from the server as a string by using "file_get_contents" method. Now i want to convert that string back to actual sound so that it can be played using js. I'm a bit new to php. Any help would be appreciated. The exact lines of my php code are -
<?php
$file = "txa.mp3";
$fx1 = fopen($file, "rb");
$fx2 = file_get_contents($file);
echo $fx2;
exit();
I want to convert the string back into original sound using Javascript or any of its implementations or if anyone has any better way of streaming audio without letting users know the actual path of the file then let me know.
You will need to pass that file content to html5 audio tag, and attribute src
Kind of
<audio controls src="data:audio/mp3;base64,HERE YOUR CONTENT OF $fx2">
And if you want to use javascript for this reason you might use DOM selectors to set that value to attribute src.
I have the contents of an mp3 file saved as a variable, (this isn't meant to be practical, just for a little project of mine), and I wish to play the contents of this variable as an audio file. This would be a simple task with something like node, but unfortunately I must do this entirely client side.
Please note I can not just save the content of the string as an mp3 file, I need to be able to play it from a variable.
I have looked into this, but from what I have found, it appears that this can not be done. If any of you have a solution, I would appreciate hearing it.
This is not very practical, as you're going to get very high memory footprints within the JS engine and will likely cause unnecessary garbage collection... but it is possible to a base64 encode the MP3 which can then be fed into the src attribute of an <audio> tag.
Because it is unrealistically to provide a base64 encoded MP3 in an answer here I'll provide a Fiddle: https://jsfiddle.net/4t6bg95z/1/
But the gist of the code can be something like:
var audio = document.getElementById('audio');
audio.src = "data:audio/mp3;base64,..."; //This is a base64 encoded string of an MP3 file
window.beep = function() {
audio.play();
}
Obviously, it is much better practice to provide a URL to the audio source instead, as that's the intended usage of the Audio API.
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.
I'm using jquery.voice.min.js and recorderWorker.js/recorder.js for to record audio with html5. At the moment I get to record audio and i get to url download html5 audio.
I want to save blob/audio html5 in my file system, but i dont know how.
When I get the url with audio i use this c How to ode, but i dont want to donwload audio, only want to save that blob audio in file system. How I can treat blob file for it?
$.voice.export(function(url){
console.log(url); // blob:http://vshaker.com/934a8934-e11a-4049-b133-fcec8e240b29
}, "URL");
Any clue, any idea?
Regards!
Just replace the URL with base64 and you will get a base64 string of the corresponding audio.
$.voice.export(function(url){
console.log(url); // blob:http://vshaker.com/934a8934-e11a-4049-b133-fcec8e240b29
}, "base64");
post the base64data to server.
create the audio file using any of the server side language and keep any where in the file system. update the new web path to the audio source.