Flowplayer · Play local files

File type:

Your browser cannot play . Please choose a different file.
Flowplayer currently does not support audio playback. Please choose a different file.

Now playing:

<head/>

<style>

#player {
position: relative;
background: #333;
}
/* set ratio before player is loaded via css */
#player .fp-ratio {
padding-top: 56.25%;
}
#typewarning, #audiowarning {
position: absolute;
top: 30%;
width: 100%;
font-weight: bold;
font-size: 150%;
color: #ff0;
text-shadow: 0 0 3px #000;
text-align: center;
display: none;
}
 
#typewarning {
z-index: 1;
}
#audiowarning {
z-index: 2;
}

CSS

<script>

The chosen File object is given as argument to URL.createObjectURL() which in turn is used as src source parameter.

window.onload = function () {
var api,
container = document.getElementById("player"),
choice = document.getElementById("choice"),
typewarning = document.getElementById("typewarning"),
audiowarning = document.getElementById("audiowarning"),
video = document.createElement("video"),
fileElem = document.getElementById("file");
 
if (!flowplayer.support.video) {
choice.innerHTML = "This demo only works in browsers supporting HTML5 video.";
return;
}
 

fileElem.onchange = function () {
var file = fileElem.files[0],
canplay = !!video.canPlayType(file.type).replace("no", ""),
// hls is always considered as audio/mpegurl locally
// so we cannot avoid a player error without excluding hls video
isaudio = file.type.indexOf("audio/") === 0 && file.type !== "audio/mpegurl";
 
choice.querySelector("span.ftype").innerHTML = file.type;
 
[typewarning, audiowarning].forEach(function (elem) {
elem.style.display = "none";
});
 
if (canplay && !isaudio) {
 
var clip = {
sources: [
{ type: file.type, src: URL.createObjectURL(file) }
]
};
 
if (api === undefined) {
api = flowplayer(container, {
ratio: false,
autoplay: true,
embed: false,
clip: clip
 
}).on("ready", function (e, api, video) {
// for info
document.getElementById("src").innerHTML = video.src;
});
 
} else {
api.load(clip);
 
}
 
} else if (!canplay) {
typewarning.querySelector("span.ftype").innerHTML = file.type;
typewarning.style.display = "block";
 
} else {
audiowarning.style.display = "block";
 
}
};
};

JavaScript

<body/>

<p id="choice" class="info"><input type="file" id="file"> File type: <span id="ftype"></span></p>
 
<div id="player">
<div id="typewarning">
Your browser cannot play <span class="ftype"></span>. Please choose a different file.
</div>
 
<div id="audiowarning">
Flowplayer currently does not support audio playback. Please choose a different file.
</div>
 
<div class="fp-ratio"></div>
</div>
 
<p class="info">Now playing: <span id="src"></span></p>

HTML