Solved

HTML5 Embedded Movies

Posted on 2010-08-26
7
908 Views
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?

Thanks
0
Comment
Question by:vertigogroup
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 3
7 Comments
 
LVL 10

Expert Comment

by:mstrelan
ID: 33539296
0
 
LVL 4

Expert Comment

by:senthilkumarsb
ID: 33541053
0
 

Author Comment

by:vertigogroup
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>
</video>

Ideas?
0
Report: Liquid Web beats Amazon, Rackspace & More

A study by performance analyst firm Cloud Spectator finds that Liquid Web beats rivals Amazon, Rackspace and DigitalOcean when it comes to website and cloud application performance.

 

Author Comment

by:vertigogroup
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.

Thanks!
0
 
LVL 10

Expert Comment

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

Author Comment

by:vertigogroup
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">
</video>
0
 
LVL 10

Accepted Solution

by:
mstrelan earned 500 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
0

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Make icons act like add/minus for qtys 6 37
Pass a js value to an html form 5 41
center div inside another div 2 29
Slow Down an Animation 3 25
When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
The purpose of this video is to demonstrate how to Import and export files in WordPress. This will be demonstrated using a Windows 8 PC. Go to your WordPress login page. This will look like the following: mywebsite.com/wp-login.php : Click on Too…
The purpose of this video is to demonstrate how to integrate Mailchimp with WordPress, by placing a Mailchimp signup form on a WordPress Page or Post. This will be demonstrated using a Windows 8 PC. Mailchimp will be used. Log into your Mailchi…

738 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