0

I am making a html webpage which needs to run ONLY LOCALLY(Offline Website). Using "input file tag", user selects and gives the video file path that needs to be played. For the video player I am using the Video tag of html.

I tried doing this with the below code but the video is not playing. Please help me.

Note: It is an OFFLINE website.

CODE:

<html>
<head>
<script>
        function func() {
            var videolink = document.getElementById('fileID');
            var player = document.getElementById('videoID');
            var mp4Vid = document.getElementById('sourceID');
            $(mp4Vid).attr('src',videolink);
            player.load();
            player.play(); 
        }
    </script>
</head>
<body>

<input type="file" id="fileID" />
<input type="button" onClick="func();"/>

<center>
<video id="videoID" width="320" height="240" controls autoplay>
  <source id="sourceID"  type="video/mp4">
</video>
</center>

</body>
</html>
Jay Visariya
  • 83
  • 2
  • 18
  • Possible duplicate of [JavaScript Play Uploaded Audio](http://stackoverflow.com/questions/28619550/javascript-play-uploaded-audio) – Kaiido Mar 01 '17 at 06:56

2 Answers2

0

try change this:

$(mp4Vid).attr('src',videolink);

on that:

$(mp4Vid).attr('src', '' + videolink).appendTo($('#sourceID'));
mcmac
  • 1,042
  • 9
  • 13
  • what is write in a console? – mcmac Jan 03 '14 at 13:06
  • Uncaught ReferenceError: $ is not defined func onclick – Jay Visariya Jan 06 '14 at 06:40
  • do you have include jquery? if no you can use this – mcmac Jan 06 '14 at 09:30
  • I tried to include the above script, but really it doesn't work. I have uploaded my page here, you can check it out. http://goo.gl/BxX128 – Jay Visariya Jan 07 '14 at 03:59
  • ok you must move this script -> to header before your script. If you want use video tag on your website you must give source video in 3 different formats ogg, mp4 and webm look on this http://www.w3schools.com/tags/tag_video.asp – mcmac Jan 07 '14 at 09:07
  • you mean to say I need to give ALL the three formats for the video to play? When I tried some basic code it used to work with only one mp4 format also. – Jay Visariya Jan 07 '14 at 09:50
  • yes you must give all 3 formats if you want have cross browse website. If you have video only in mp4 you can find conventer. Example firefox don't support mp4 format, you can find more information in this site http://www.w3schools.com/html/html5_video.asp – mcmac Jan 07 '14 at 10:08
0

You cannot with JavaScript alone, except on modern browsers.

The Issue

It's a Web browser security feature to obsure the full path of file uploads. If you attempt to read the value of a file upload field, you'll receive something like this:

$('input[type="file"]').val(); // "C:\fakepath\some_file.mp4"

Even if in this hypothetical the file exists on my desktop (e.g., ~/Desktop/some_file.mp4).

The Workaround

On modern browsers, see "In HTML5 how to show preview of image before upload?" for using FileReader on the file input and using its source. Otherwise, you can likely do so using Adobe Flash, where installed.

Community
  • 1
  • 1
Jacob Budin
  • 9,753
  • 4
  • 32
  • 35