-1

I'm developing a WordPress site using XAMPP. I am using the html5 video tag in the header to display the video. I have the videos on the C:\ drive - not in the XAMPP installation. C:\WebVideo is the path.

I am testing in the five major browsers:

  • Firefox 27.0.1 which says "No video with supported MIME type found"
  • IE9 which just displays a big black box.
  • Chrome Version 32 displays the control bar as does Opera 17.
  • Safari 5.1.7 shows the header without a hint that video is supposed to be displayed.

So, the only clue I have is the MIME types.

I do have an .htaccess file located in the C:/xampp/htdocs/wordpress folder. This is the content of that file:

AddType video/mp4 .mp4 .m4v
AddType video/ogg .ogv
AddType video/webm .webm

I know the file is being read because when I put a bunch of nonsense in the file I get internal sever errors. When the nonsense is removed Wordpress functions correctly.

Here is the HTML I am using:

<video width="320" height="240" controls="" preload="" style="width:30%; position:absolute; float:right; ">
<source src="C:/WebVideo/my-vid.mp4"></source>
<source src="C:/WebVideo/my-vid.ogv"></source>
<source src="C:/WebVideo/my-vid.webm"></source>
</video>

The video itself is not broken it plays fine.

I've been all over the web for about 2 hours looking for some fix and come up empty handed. Anyone have any ideas?

Raptor
  • 53,206
  • 45
  • 230
  • 366
user3363085
  • 1
  • 1
  • *sidenote:* `position: absolute` with `float: right`? doesn't sound logical. – Raptor Feb 28 '14 at 02:33
  • You shouldn't use local path for your video `src`. If you want to be accessed by WordPress (same for other websites), put it under the directory of web root, which is `C:/xampp/htdocs/` in your case. – Raptor Feb 28 '14 at 02:36
  • @Shivan Hello Shivan. I got to wondering about that the minute I posted, but I didn't know quite how to fix it. So, now the videos are playing fine -- except for Safari where the video doesn't show up at all. But I guess that another issue... Thanks very much. – user3363085 Feb 28 '14 at 02:48
  • @Shivan Oh, the style I'm still working on. This is a WeaverII template and the absolute positioning was the only way I could find to get it into the header. The float: right is not doing what I thought it would do. The video shows up on the left side. But, I wanted to at least get the video showing up first. Thanks again. – user3363085 Feb 28 '14 at 02:51
  • (Windows only) QuickTime has to be installed in order to make Safari to load video via `video` tag. See [this](http://stackoverflow.com/questions/20347352/html5-video-tag-not-working-in-safari-iphone-and-ipad) – Raptor Feb 28 '14 at 02:58
  • 1
    @Shivan Shivan you are a goldmine! Now all browsers are playing the video. Thank you so very, very much! – user3363085 Feb 28 '14 at 03:42
  • do not use c:/ path add your video on your theme folder add apply your site url to path. – Ravi Patel Feb 28 '14 at 04:10

1 Answers1

0

As mentioned in comment, Safari requires QuickTime to be-installed to playback video via <video> tag (Windows only).

Also, it is suggested to provide alternative video source for fallback purpose. Even better, use libraries that has Flash player fallback, such as videoJS.

Raptor
  • 53,206
  • 45
  • 230
  • 366