Play video HTML5

Question

Is there a ready to use code or some sort to enable the fullscreen button on Safari for the ?video? Currently when the video is loaded, and click on it doesnt work.

<video width="320" height="240" controls="controls" name="media" src="urlvideo">Text</video>

What types are supported for the video tag? Do i need to use type=audio/mp3 for playing mp3 and type=audio/wav etc....?

By they way, the video ui looks different on each browser or not working at all... is there a way to have them all the same look and feel and have them all work on all browsers?

[Dive Into HTML 5](http://diveintohtml5.ep.io/video.html) has a good tutorial on all the nuances of this. — someone, Oct 10 '11 at 21:32

score 0 · Answer 1 · answered Oct 10 '11 at 23:15

0

purely css, you can target it with video::-webkit-media-controls-fullscreen-button{}, and you'll want to reference this http://codesearch.google.com/codesearch/p#OAMlx_jo-ck/src/third_party/WebKit/Source/WebCore/css/mediaControls.css

answered Oct 10 '11 at 23:15

albert

8,112
3
47
63

score 0 · Answer 2 · answered Oct 10 '11 at 23:33

0

To play video when user clicks on it:

    document.querySelctor('video').addEvenetListenr('click', function(){
         this.play()
    }, false);

To have fullscreen use Webkit and Gecko full screen API

answered Oct 10 '11 at 23:33

Mohsen

64,437
34
159
186

score 0 · Answer 3 · edited May 23 '17 at 09:59

First, not all browsers have the same video codecs, so not all browsers can play the same videos. I would suggest looking here to choose a format that is supported by the browsers you are targeting:
HTML5 Video Codec Support By Browser

For Safari specifically, I have gotten this JavaScript to work to get a video to play fullscreen:

var vid = document.getElementById('video');
vid.webkitEnterFullscreen();
vid.play();

Also, check out this thread: Web App - iPad webkitEnterFullscreen - Programatically going full-screen video

Hope that helps!

Play video HTML5

3 Answers3