I'm experiencing a sudden problem with an embedded HTML5 video on my Drupal site. At first I thought it was a problem with my HTML5 code, but I believe the problem is with the WYSIWYG editor within Drupal.
I have a video in several formats, and want have a Flash fallback for those less fortunate.
Here is my code:
<video width="480" height="320" controls="controls" poster="poster.png">
<source src="video.webm" type="video/webm" />
<source src="video.mp4" type="video/mp4" />
<source src="video.ogv" type="video/ogg" />
<object width="480" height="320"
data="moxieplayer.swf" type="application/x-shockwave-flash">
<param name="src" value="moxieplayer.swf" />
<param name="flashvars" value="url=video.mp4&poster=poster.png" />
<param name="allowfullscreen" value="true" />
<param name="allowscriptaccess" value="true" />
</object>
</video>
Everything was working as expected. Then I opened the WYSIWYG editor, Disabled rich-text to get to the HTML, and added the "poster" attribute. I clicked save and, ever since, it has been showing TWO videos: the main source and the Flash fallback.
I found that odd so I removed the poster attribute (going back to what I had before), but the problem remained.
I know what the problem is... It became apparent when I viewed the source in the browser. The source is being rendered like this:
<p><video width="480" height="320" controls="controls" poster="poster.png"><br />
<source src="video.webm" type="video/webm"></source><br />
<source src="video.mp4" type="video/mp4"></source><br />
<source src="video.ogv" type="video/ogg"></source>
</video>
</p>
<object width="480" height="320" data="moxieplayer.swf" type="application/x-shockwave-flash">
<param name="src" value="moxieplayer.swf" />
<param name="flashvars" value="url=video.mp4&poster=/" />
<param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="true" />
</object>
Notice that in the rendered code, "object" is now outside the video tag. I'm guessing that's the problem. For whatever reason it was fine, then I edited the code to add the poster, and rocking the boat has resulted in this issue. I am in "Full HTML" mode when making my edits.
Unfortunately, disabling WYSISWG isn't an option as my customer needs to use it. This is a bit frustrating as I suspect that may be the issue. I'm using TinyMCE 3.5.10.
Does anyone have any suggestions on how to deal with this problem?
Thank you very much!