JSFiddle - React, Tailwind, and code Playground

by NunoMira

HTML

<!--PARA ESCOLHER UM FILE DO TIPO IMAGE-->
<input id="img" type="file" multiple="multiple" name="uploadedfile[]" />
<div id="name"></div>
<div id="type"></div>
<img id="xpto"/>

<hr>
<br>

<div>
<!--PARA ESCOLHER UM FILE DO TIPO VIDEO-->
<input id="video" type="file" />
</div>
<div>
    <video id="myVideo" audio="muted" autobuffer poster="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRe0aL2cRiLYZ6LoUGE5-dwddUvMD6QNbZ0CYIQJLp3SNDDz19W"></video>
</div>

CSS

#img
{
    margin-bottom: 2px;
}
#name
{
    height: 30px;
    width: 400px;
    background:yellow;
}
#type
{
    height: 30px;
    width: 400px;
    background:green;
}
#bytes
{
    height: 30px;
    width: 400px;
    background:gray;
}

#video
{
    margin-bottom: 2px;    
}
#myVideo
{
    width: 240px;
    height: 240px;
}

JavaScript

//////////////////////////////
//Input File (image e video)//
//////////////////////////////

//IMAGE with HTML5 (get name, size, bytes, ext)
$('#img').change(function()
{
    debugger;
    var file = this.files[0];
    var fileURL = URL.createObjectURL(file);

    $("#xpto").attr("src",fileURL);
    $("#name").html(file.name);
    $("#type").html(file.type);
});

//Video with HTML5
var file;
$('#video').change(function()
{
    file = this.files[0];
    var fileURL = URL.createObjectURL(file);
    $("#myVideo").attr("src",fileURL);
});
$("#myVideo").bind("click", function ()
{
    if(file!=undefined)
    {
        var vid = $(this).get(0);
        if (vid.paused)
        {
            vid.play();
            vid.controls = true;
        } 
        else 
        {
            this.load();
            vid.controls = false;
        }
	}
    else
        return false;
});
//Outros métodos:
//http://www.w3schools.com/tags/ref_av_dom.asp