播放视频 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?

Answer 1

纯 css，您可以使用 video::-webkit-media-controls-fullscreen-button{} 定位它，并且您需要参考此http://codesearch.google.com/codesearch/p#OAMlx_jo-ck/ src/third_party/WebKit/Source/WebCore/css/mediaControls.css

Answer 2

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

Answer 3

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!