How to Embed Video using HTML5 with local file

Murda Ralph

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>
Hobby99

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.

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

分類Dev

Play HTML5 video from JSON file using next and prev buttons

分類Dev

How to live stream a local video using FFmpeg

分類Dev

How to embed streaming Video (rtmp protocol) in HTML web page?

分類Dev

Embed content of a html file to another html page using the Ionic framework?

分類Dev

How to disable HTML5 video on YouTube with Firefox?

分類Dev

how to add skin to a video element in html5

分類Dev

How to debug HTML5/CSS for background video in RoR app

分類Dev

how to embed a youku video on an HTTPS site?

分類Dev

How to embed youtube video in firefox os webapp?

分類Dev

How to clear all HTML5 local storage from Safari?

分類Dev

How to Html5 Local Storage with p:schedule

分類Dev

How to parse Excel (XLS) file in Javascript/HTML5

分類Dev

Find out if Video.JS is using HTML5 or the Flash Player

分類Dev

HTML5 + 2 JS Scripts only working separately - camera and local file input

分類Dev

how to open video file in code blocks using opencv

分類Dev

how to create an audio clip from a video file using command line?

分類Dev

Read File stored on some URL using HTML5 File API

分類Dev

How to embed a public report using filters?

分類Dev

How to embed an image into an Outlook email using VBA

分類Dev

Get frame numbers in HTML5 Video

分類Dev

HTML5 video problems on Safari

分類Dev

HTML5 video media fragments with Javascript

分類Dev

Poster to end video with html5

分類Dev

Creating Video in HTML5/Chrome

分類Dev

WordPress Not Rendering HTML5 Video

分類Dev

Responsive Fullscreen HTML5 Video Issue

分類Dev

Creating a section with video as background HTML5

分類Dev

Html5 video background, keep center of video in center

分類Dev

How to download a valid Youtube video HTML page using Python?

Related 関連記事

  1. 1

    Play HTML5 video from JSON file using next and prev buttons

  2. 2

    How to live stream a local video using FFmpeg

  3. 3

    How to embed streaming Video (rtmp protocol) in HTML web page?

  4. 4

    Embed content of a html file to another html page using the Ionic framework?

  5. 5

    How to disable HTML5 video on YouTube with Firefox?

  6. 6

    how to add skin to a video element in html5

  7. 7

    How to debug HTML5/CSS for background video in RoR app

  8. 8

    how to embed a youku video on an HTTPS site?

  9. 9

    How to embed youtube video in firefox os webapp?

  10. 10

    How to clear all HTML5 local storage from Safari?

  11. 11

    How to Html5 Local Storage with p:schedule

  12. 12

    How to parse Excel (XLS) file in Javascript/HTML5

  13. 13

    Find out if Video.JS is using HTML5 or the Flash Player

  14. 14

    HTML5 + 2 JS Scripts only working separately - camera and local file input

  15. 15

    how to open video file in code blocks using opencv

  16. 16

    how to create an audio clip from a video file using command line?

  17. 17

    Read File stored on some URL using HTML5 File API

  18. 18

    How to embed a public report using filters?

  19. 19

    How to embed an image into an Outlook email using VBA

  20. 20

    Get frame numbers in HTML5 Video

  21. 21

    HTML5 video problems on Safari

  22. 22

    HTML5 video media fragments with Javascript

  23. 23

    Poster to end video with html5

  24. 24

    Creating Video in HTML5/Chrome

  25. 25

    WordPress Not Rendering HTML5 Video

  26. 26

    Responsive Fullscreen HTML5 Video Issue

  27. 27

    Creating a section with video as background HTML5

  28. 28

    Html5 video background, keep center of video in center

  29. 29

    How to download a valid Youtube video HTML page using Python?

ホットタグ

アーカイブ