search

jackmoore / colorbox

A light-weight, customizable lightbox plugin for jQuery
http://www.jacklmoore.com/colorbox/
MIT License
4.75k stars 1.14k forks source link

html5 video autoplay #177

Open fhickler opened 12 years ago

fhickler commented 12 years ago

It seems that html5 video inside a colorbox will not autoplay.

I have a test site set up to demonstrate this issue. It's a main page that opens a colorbox with an explicit url of a sub page. That sub page uses the html5 video tag with auotoplay set to true (autoplay="autoplay") to display a video. The video does begin loading, but in Chrome and Safari, it doesn't autoplay. It DOES in Firefox and IE9. If you open the sub.html page directly, it autoplays in all browsers, so it appears to be a colorbox-related issue.

The test site is up at: http://fisheyemedia.net/test/main.html

code for the main page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<link href="css/colorbox.css" rel="stylesheet" />
<script src="js/jquery-1.6.1.min.js" type="text/javascript"></script>
<script src="js/jquery.colorbox.js" type="text/javascript"></script>
<script src="js/play.js" type="text/javascript"></script>
</head>
<body style="background-color:grey">
        <a href="#" onclick="$.colorbox({href:'sub.html', width:380, height:360})">click</a>
</body>
</html>

and for the sub page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
</head>
<body>
    <div id="theVideo">
        <video controls="controls" autoplay="autoplay">
            <source src="http://www.fisheyemedia.net/revamp/media/wedBrianAllison.mp4" type="video/mp4" />
            <source src="http://www.fisheyemedia.net/revamp/media/wedBrianAllison.ogv" type="video/ogg" />
        </video>
    </div>
</body>
</html>
jackmoore commented 12 years ago

Have you tried using an iframe to display the content? You shouldn't be loading complete HTML documents with ajax.

ukch commented 12 years ago

I am also experiencing this same issue. Using an iFrame the issue does not occur. However, I'm not loading a complete HTML document - my AJAX is only returning the video tag, so ideally this would work without having to resort to an iFrame.

gp0 commented 10 years ago

I had this issue, too, and have worked around it by triggering play via JS.

aik099 commented 10 years ago

This seems like bug with <video> tag handling in particular browser versions. I also manually start play via JavaScript to be on the safe side.