#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2009
    Posts
    94
    Rep Power
    6

    Embedding a video (mp4)


    I embedded a video written in Flash (*.swf) file into my web site. However, with the advent of iPads and Androids this does not work. So I converted the video to an mp4 file. On my localhost testbed this works fine on my PC. But when I load it onto the web site it doesn't work on my PC.

    The error message states "an error occured inside a plug-in on this web page".

    The code is...

    Code:
    <embed src="score_card_4bbb_marking.mp4" width="900" height="600"></embed>
    Can anyone please clarify why this is not working please.
  2. #2
  3. Code Monkey V. 0.9
    Devshed Regular (2000 - 2499 posts)

    Join Date
    Mar 2005
    Location
    A Land Down Under
    Posts
    2,166
    Rep Power
    1990
    Try using the HTML5 <video> tag. That will have a lot better chance of working then embedding a video file.
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2009
    Posts
    94
    Rep Power
    6
    The problem, as I see it, is that html5 is not generally available in all browsers. And I don't think that it works with Android or iPad devices does it?
  6. #4
  7. Code Monkey V. 0.9
    Devshed Regular (2000 - 2499 posts)

    Join Date
    Mar 2005
    Location
    A Land Down Under
    Posts
    2,166
    Rep Power
    1990
    At this point, HTML5 is the only thing that will work with iPad/iPhone devices. You just need to use the right video format. If you're doing it the right way you'll use MP4, WebM and OGV to cover every base out there (at this point at least).

    As far as desktop browsers go, it's supported in all of the browsers that I run here. Of course it's not going to be available in something that's a few versions old, so it will depend on how many of your users are using older versions.

    If you're concerned, look at one of the commercial video player scripts. As an example JWPlayer is pretty good - Video Player Download | JW Player Online Video Player
  8. #5
  9. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2009
    Posts
    94
    Rep Power
    6
    Thank you Catacaustic for your help; it is much appreciated.

    I have the following code

    Code:
    <video width="900" height="600" autoplay>
      <source src="score_card_4bbb_marking.mp4" type="video/mp4">
      <source src="score_card_4bbb_marking.ogg" type="video/ogg">
    Your browser does not support the video tag.
    </video>
    The mp4 file was produced from an swf (Flash) file converted using first the free swf to avi convertor (Recool Software provides Video to HTML5, Flash to HTML5,swf to HTML5,YouTube,Mobile for all formats and any devices) and then the free avi to mp4 convertor ([OFFICIAL] WinX DVD Ripper Software. Copy & Rip DVD to AVI MP4 H264 iPhone iPad Android HTC Samsung Galaxy Chromecast.).

    I have tried it on my Windows 7 (64bit) system with Avant (Ultimate 2015 build 7), my preferred browser, Chrome (39.0.2171.95), Firefox (30.0), IE (9.0.8112.16421) and Safari (5.1.7) and also on my Tablet (Samsung Galaxy) but none will display correctly.

    My web site is password protected but I have moved a demo page so you can try to view it at score_card_4bbb_marking.
  10. #6
  11. Code Monkey V. 0.9
    Devshed Regular (2000 - 2499 posts)

    Join Date
    Mar 2005
    Location
    A Land Down Under
    Posts
    2,166
    Rep Power
    1990
    That's because your video files are 404'ing (not found). You need to call them via the correct URL.

    You should use your browsers debugging tools (they all have the, even IE) to look at things like this. That will tell you straight away what the problem is without needing to wait for someone on here for something that's this simple of an answer.
  12. #7
  13. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2009
    Posts
    94
    Rep Power
    6
    I'm not sure that I understand. When I click on the hyperlink (included in my earlier post) to load the html page demo_mp4.html it loads the page without a 404. It simply reports that the browser does not support mp4.
  14. #8
  15. ~ bald headed old fart ~
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2005
    Location
    chertsey, a small town s.w. of london, england
    Posts
    267
    Rep Power
    88
    Hi there rps,

    according to your code, these two files...

    score_card_4bbb_marking.mp4
    score_card_4bbb_marking.ogg

    ...should be in the same directory as your...


    demo_mp4.html

    ...file, but they are not there.

    Where have you put them?

    coothead
  16. #9
  17. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2009
    Posts
    94
    Rep Power
    6
    Both score_card_4bbb_marking.mp4 and demo_mp4.html are in the same (root) folder. I have attached a screen print (well hopefully I have attached it) though I have renamed demo_mp4.html as sdemo_mp4.html to align the files next to each other. I do not have an "ogg" file which I simpy thought was an error file.

    temp_mp4.jpg
  18. #10
  19. ~ bald headed old fart ~
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2005
    Location
    chertsey, a small town s.w. of london, england
    Posts
    267
    Rep Power
    88
    Hi there rps,

    if the "score_card_4bbb_marking.mp4" file was in the same directory as the "sdemo_mp4.html" then this link...


    ...would show the video in the Firefox, Chrome or Opera browser and in the windows Media Player if IE.

    Also note that your code...
    Code:
    
    <video autoplay="" height="600" width="900"></video>
    <source type="video/mp4" src="score_card_4bbb_marking.mp4"></source>
    <source type="video/ogg" src="score_card_4bbb_marking.ogg"></source>
    ...is incorrect.

    It should be...
    Code:
    
    <video autoplay height="600" width="900">
     <source type="video/mp4" src="score_card_4bbb_marking.mp4">
     <source type="video/ogg" src="score_card_4bbb_marking.ogg">
    </video>

    coothead
    Last edited by coothead; January 7th, 2015 at 04:25 PM. Reason: tpynig eorrr!!
  20. #11
  21. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2009
    Posts
    94
    Rep Power
    6
    Okay, I appear to have the code wrong but have now corrected it to that stated by coothead. I have also renamed the page so it can now be accessed at http://www.vilasolgolfclub.com/sdemo_mp4.html.

    However, whether I use Avant, IE9, Chrome or Safari on my computer it simply states that "Your browser does not support the video tag". I have no 404 messages.
  22. #12
  23. ~ bald headed old fart ~
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2005
    Location
    chertsey, a small town s.w. of london, england
    Posts
    267
    Rep Power
    88
    Hi there rps,

    I am still getting a 404, in all my test browsers, for your "score_card_4bbb_marking.mp4" file.

    coothead
  24. #13
  25. Code Monkey V. 0.9
    Devshed Regular (2000 - 2499 posts)

    Join Date
    Mar 2005
    Location
    A Land Down Under
    Posts
    2,166
    Rep Power
    1990
    Firstly, you are getting that message because it's par tof the HTML that you're outputting, not because of some issue with the broswer. Your pages source code is:

    Code:
    <p>This is a video sdemo</p>
    <p>
    
    
    <video autoplay height="600" width="900">
     <source type="video/mp4" src="score_card_4bbb_marking.mp4">
     <source type="video/ogg" src="score_card_4bbb_marking.ogg">
    </video>
    
    Your browser does not support the video tag.</p>
    And you must not have the video files set up right as they are still giving not found errors - both of them. Look at the link:

    The page cannot be found

    Nothings there. You need to solve that before you can do anything else. Remember that file names can be case-sensitive depending on your server, and you need to have everything exactly as it is on the server as one character off will make the file un-findable (if that's even a word).

IMN logo majestic logo threadwatch logo seochat tools logo