0

I have a special requirement with html5 <video>, I hope, you guys can help me out.

Is it possible to add a <div>,<p> or something above the html5 <video> object? Plus Trigger the PlayState of the Video and hide it, and show it after the video is stopped?

This is the Poster:

eg:

<video width="280" height="158"  poster="img/thumb.png" controls>
   <source src="TestVideo1.mp4" type="video/mp4">
 Get a new Browser my friend
 <h1>Title</h1>
 <p>Some Description</p>
 </video>

And is should look like this

Is there any possible way to do this?

Thank You

Note:

I have read this post Overlaying a DIV On Top Of HTML 5 Video but it didn't helped.

Images:

Poster

https://i.stack.imgur.com/vA1zn.png

It should be like this:

https://i.stack.imgur.com/qsZaI.png

Community
  • 1
  • 1
Smilla J.
  • 1,124
  • 10
  • 15
  • if you're prepared to use javascript take a look at http://www.videojs.com/ it does what you want and keeps the same user experience across browsers – andrew May 20 '14 at 16:07
  • Thank you, but I'd like to add a Text on the Player eg. Title and Description. It must disappear when the Video is playing. – Smilla J. May 23 '14 at 07:09

1 Answers1

0

You are going to have to use a combination of the canvas tag and javascript to get what you want.

Try taking a look at these two articles for a start:

video + canvas = magic

Using CSS3 and Jquery to create a custom HTML5 Player

Travis Corrigan
  • 41
  • 4