How to Embed Video using HTML5 with local file

十年热恋 提交于 2019-12-12 14:29:25

问题


I'm trying to embed a video using html5 with a local mp4 file.

file on my local machine.

when i debug i keep getting invalid file path or unsupported video type.

What am i missing? I can get this to work if i plug in a http link to a mp4. But when i plug in a local file it doesn't

    <link href="http://vjs.zencdn.net/4.1/video-js.css" rel="stylesheet" />
    <script src="http://vjs.zencdn.net/4.1/video.js">
        videojs("example_video_1", {}, function(){
        });
    </script>
    <video id="example_video_1" class="video-js vjs-default-skin" width="640" height="264">
        <source src="file:///C:/Users/rpimentel/Desktop/converts/demo1.mp4" type='video/mp4' />
    </video>

回答1:


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.




回答2:


We can't debug your page because

  1. You are working locally
  2. We don't know where the video file is located at

My advice would be: drop your video file to browser, copy the address from location bar and paste it to src attribute of your source tag.




回答3:


Simple answer: Not allowed to load local resource.

If the HTML page is served by HTTP from a server, you can't access any local files by specifying them in a src attribute with the file:// protocol as that would mean you could access any file on the users computer without the user knowing which would be a huge security risk.

though this might help:

Play local (hard-drive) video file with HTML5 video tag?

Good luck.



来源:https://stackoverflow.com/questions/18670728/how-to-embed-video-using-html5-with-local-file

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!