Play video HTML5
Is there a ready to use code or som开发者_运维问答e 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?
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
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
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!
精彩评论