Go Premium for a chance to win a PS4. Enter to Win


HTML5 Embedded Movies

Posted on 2010-08-26
Medium Priority
Last Modified: 2012-05-10
I am currently running a WordPress website and would like to embed a video in the sidebar. I have customized the sidebar, so I am not using plugins. Currently, I am embedding a flash video, but I want to make the move to HTML5. I need a script to embed h264 videos for supported browsers and flash for non-supported browsers.

Also, I would like to integrate shadowbox with this. I have install shadowbox JS on WordPress and tried calling it via rel="shadowbox" but no joy.

Anyone care to assist?

Question by:vertigogroup
  • 3
  • 3

Expert Comment

ID: 33541053

Author Comment

ID: 33542391
OK. Everything is working fine except the fall back to flash. I have the flv file, but cannot get it to play in IE as a fall back. Here is my code:

<video controls width="300">
<source src="http://www.abc.com/test.ogg" type="video/ogg" />
<source src="http://www.abc.com/test.m4v" type="video/mp4" />
<embed src="http://www.abc.com/test.flv" type="application/x-shockwave-flash" width="300" height="181" allowscriptaccess="always" allowfullscreen="true"></embed>

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!


Author Comment

ID: 33550884
Any ideas? I need to be able to have the videos play in all browsers and detect the browser automatically. So, mv4, flv, and ogg. Assistance is greatly appreciated. Right now, I can only get the video play in Safari and Chrome. I would like to add firefox and IE compatibility.

I know I could just use flash, but I want iPhone and iPad support.

LVL 10

Expert Comment

ID: 33551336
you cant embed an flv directly. you need a flash player. for example JW Player or FlowPlayer are big ones

Author Comment

ID: 33551579
So, is the code below correct?

<video controls width="300">
<source src="http://abc.com/abc.ogg" type="video/ogg" />
<source src="http://abc.com/abc.m4v" type="video/mp4" />
<embed type="application/x-shockwave-flash" src="abc.com/flv-embed/flvplayer.swf" width="500" height="301" style="undefined" id="player1" name="player1" quality="high" wmode="transparent" allowscriptaccess="always" allowfullscreen="true" flashvars="height=301&amp;width=500&amp;file=http://abc.com/abc.flv&image=abc.com/abc.jpg&link=abc.com/abc.flv&callback=analytics">
LVL 10

Accepted Solution

mstrelan earned 2000 total points
ID: 33551616
you prob need a closing embed tag, as well as an object tag i think...try just getting the flash file working without the html5 video tags etc and then wrap it in video tags

Featured Post

Hire Technology Freelancers with Gigs

Work with freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely, and get projects done right.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
Without even knowing it, most of us are using web applications on a daily basis.  In fact, Gmail and Yahoo email, Twitter, Facebook, and eBay are used by most of us daily—and they are web applications. We generally confuse these web applications to…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Suggested Courses

927 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question