Menu
How would I link any media files (swfs/mp4/mp3/png/other media embed files) to the source of my object embed: basically I want this:
<input type="file"></input>
to send the uploaded file (preferably an swf) to the Data and Value sources:
<object type="application/x-shockwave-flash" data=""
style="width:640px;height:480px;margin:1px 350px;">
<param name="movie" value="" />
<param name="allowfullscreen" value="true" />
<param name="allowscriptaccess" value="always" />
<param name="wmode" value="opaque" />
<param name="quality" value="high" />
<param name="menu" value="false" />
</object>
Link to the full current project:
Codepen
247
The <input type="file"> defines a file-select field and a "Browse" button for file uploads. To define a file-select field that allows multiple files to be selected, add the multiple attribute. Tip: Always add the <label> tag for best accessibility practices!
Although supported by the browsers, the <embed> is a deprecated HTML tag and is not part of the HTML4 standard.
I suggest using <embed> tag over <object> for basic Flash embedding (less setup code).
To achieve your goal, you'll have to...
Check what type of file is selected (see: var type = file.type; in code below).
Create appropriate Element (tag) for such file (see: document.createElement("video"); in code).
Remove any already existing Element in your container... .removeChild(container.childNodes[0].
Put new Element in same container (eg: a <div>) by using .appendChild(someNewElement);
You could try something like below:
Here the <div> holds inside an <a> tag which itself is the container of your newly created (or dynamic) elements. Note its id is aTag, so getting a reference by var container = document.getElementById("aTag"); means that later we can update the aTag content by using container.appendChild(tmpElement);
<!DOCTYPE html>
<html>
<body>
<p> Choose a media file...</p>
<input type="file" id="fileChooser" accept="*/*"/>
<div>
<a id="aTag"> </a>
</div>
<script>
document.getElementById('fileChooser').addEventListener('change', onFileSelected, false);
function onFileSelected(evt)
{
var file = evt.target.files[0]; // FileList object
var type = file.type;
//alert("file TYPE is : " + type);
var fileURL = URL.createObjectURL(file);
var reader = new FileReader();
reader.readAsDataURL(file);
var tmpElement; //will hold image, video, Flash content....
var path; //will hold URL of file BLOB (not file path)....
reader.onloadend = function(evt)
{
if (evt.target.readyState == FileReader.DONE)
{
//# update file path...
path = (window.URL || window.webkitURL).createObjectURL(file);
//# remove any other existing media element...
var container = document.getElementById("aTag");
container.removeChild(container.childNodes[0]);
//# create HTML5 media element...
if ( type == "image/jpeg" || type == "image/png" || type == "image/gif")
{
tmpElement = document.createElement( "img");
tmpElement.setAttribute("width", "650");
}
if ( type == "video/mp4" )
{
tmpElement = document.createElement( "video");
tmpElement.setAttribute("controls", "true" );
tmpElement.setAttribute("width", "800");
}
//# create Flash plugin <embed> tag...
if ( type == "application/x-shockwave-flash" )
{
path = (window.URL || window.webkitURL).createObjectURL(file);
aTag.innerHTML = "<embed id='aFlash' src='" + path + "' width='800' height='600' type='application/x-shockwave-flash'>"
//# stop code here since we don't need these "appendChild" commands below
return 0; //exit the function
}
//# add newly created HTML5 element with file path
tmpElement.setAttribute("src", path);
container.appendChild(tmpElement);
}
};
}
</script>
</body>
</html>
PS:
Chrome browser does not allow dynamic loading of SWF from file selection. The <embed> tag must exist, on page load, with an http:// or file:// based url in "src"parameter. It's a security issue.
Tested SWF loading on Firefox and it works fine.
Updated code is tested on Chrome only and works fine to load Flash content.
122
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
