Play Local (Hard-Drive) Video File With Html5 Video Tag

(function localFileVideoPlayer() {  'use strict'  var URL = window.URL || window.webkitURL  var displayMessage = function(message, isError) {    var element = document.querySelector('#message')    element.innerHTML = message    element.className = isError ? 'error' : 'info'  }  var playSelectedFile = function(event) {    var file = this.files[0]    var type = file.type    var videoNode = document.querySelector('video')    var canPlay = videoNode.canPlayType(type)    if (canPlay === '') canPlay = 'no'    var message = 'Can play type "' + type + '": ' + canPlay    var isError = canPlay === 'no'    displayMessage(message, isError)
    if (isError) {      return    }
    var fileURL = URL.createObjectURL(file)    videoNode.src = fileURL  }  var inputNode = document.querySelector('input')  inputNode.addEventListener('change', playSelectedFile, false)})()

video,input {  display: block;}
input {  width: 100%;}
.info {  background-color: aqua;}
.error {  background-color: red;  color: white;}

<h1>HTML5 local video file player example</h1><div id="message"></div><input type="file" accept="video/*" /><video controls autoplay></video>

How to Embed Video using HTML5 with local file

HTML5 works just by having the video tags.
Make sure to include the video source directly in the video tag like:

<video id="example_video_1" class="video-js vjs-default-skin" width="640" height="264" src="file:///C:/Users/rpimentel/Desktop/converts/demo1.mp4" type='video/mp4' />
</video>

Concerning the video src-path. The video must be somewhere inside your application directory in order to play. So when your application is called video_homepage then put a folder in it with videos. In this example case the source is:

<video src= video_homepage/videos/demo1.mp4></video>

That already should make the video run in Safari and IE (for mp4). For Firefox and Chrome you must convert the video first to .webm (free webm video converter is a free and good converter)

video id and class etc. is only needed when you use an external .js video player (plug in). for playing videos in HTML5 you only need the video tags and src. thats it.

embed video in html page and make it play any video file in local drive

From Mozilla's page on browser-supported audio/video formats:

The MPEG container format with the H.264 video codec and either the
AAC audio codec or the MP3 audio codec is supported by Internet
Explorer and Safari. Firefox and Opera do not support the format.
Support for the format is deprecated in Chrome, and Chromium does not
support it either.

The MPEG media formats are covered by patents, which are not freely
licensed. All the necessary licenses can be bought from MPEG LA. Since
H.264 is currently not a royalty free format, it is unfit for the open
web platform, according to Mozilla [1, 2], Google [1, 2] and Opera.

Short answer, Firefox doesn't support mp4, as it's not open source. But it does support multiple sources and will play the first one it supports.

Further, it doesn't appear that swf or flv are supported by any browsers, since they are totally Adobe and require Flash Player, but the following should work around that:

<video src="test.mp4" controls>
    <object data="test.flv" type="application/x-shockwave-flash">
      <param value="test.flv" name="movie"/>
    </object>
</video>

Be aware that the above had .swf file as data and value originally; I haven't tested if .flv will work on its own.

Html5 video tag - to play a local video downloaded in every 5 minutes

You can force the browser to not cache, but it is set in the header so applies to the entire page which is not what you want most likely.

You can also set the response header on the server side to set the time to live to be less than 5 minutes. See here for more info: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control

Here you are relying on the browser to properly respect this, which may not always be the case.

As an extra precaution, you can simply append a time stamp or a random number to your video file name so that the browser sees it as a new file and will definitely download it. This is probably the safest approach if you want to guarantee it will not be cached.

HTML5 video local source + web source

I actually solved this by simply installing a local webserver and pointing the first source to localhost, and the second to my website. Cheers!

---

Related Topics