CODEWITHSUNDEEP
htmlvideosafari
Ant
Ant

Reputation: 61

Safari HTML 5 video tag not working inside a link tag

Issue is with Safari. The video Tag. I have placed a video tag inside a link tag. I am trying to make a video a link. It works on all browsers except Safari. the page in question is here: neumatic.com In Safari it only goes to the poster image but will not play the video. I've tried moving the link tag further up the div tree, no luck.

Upvotes: 2

Views: 3243

Answers (2)

ThinkingStiff
ThinkingStiff

Reputation: 65381

I got a simple video to work for me on Safari 5.1.1 on OS X and discovered that it's the poster attribute on <video> that's preventing it from working in Safari, not the <a> wrapped around it. If you remove the poster attribute, it works fine on Safari. I kept your code the exactly same except for removing the poster attribute (except for a smaller width and fully qualifying the src so it would play, neither of which affected the outcome).

Another Video

Demo: http://jsfiddle.net/ThinkingStiff/8vTN7/

<a href="http://thinkingstiff.com" target="_top">
<video controls="controls" width="592" height="252">
<source src="http://html5videoformatconverter.com/data/images/happyfit2.mp4">
</video>
</a>

Your Video

Demo: http://jsfiddle.net/ThinkingStiff/cRx4a/

Changed:

<video class="video-js" autoplay="" loop="" preload="" poster="_neumatic-video/neumatic-video-production-intro/neumatic-video-production_poster.jpg" id="intro">

To:

<video class="video-js" autoplay="" loop="" preload="" id="intro" >

Upvotes: 1

animuson
animuson

Reputation: 54777

It wouldn't appear that a <video> element is even allowed within an <a> element. According to the HTML specifications:

The a element may be wrapped around entire paragraphs, lists, tables, and so forth, even entire sections, so long as there is no interactive content within (e.g. buttons or other links).

Even though the HTML5 validator says that a video inside an anchor is valid (for the time being), I would consider a video to be interactive content, but I can't find anything that specifically lists which element in HTML5 are considered "interactive content."

If it is valid: This appears to just be a browser compatibility issue. Previously, block-level content (which would include the video element) was not allowed within anchors. Safari may just have bugs or implementation issues concerning block-level content at the moment, which may even be specific to the video element. You have to remember that HTML5 is still new and in development, you're bound to run across some weird glitches and issues somewhere. Try filing a bug report with Safari.

Either way, I would consider placing a video inside an anchor as bad practice, in personal opinion. Good luck.

Upvotes: 1

Related Questions