开发者

Play video HTML5

开发者 https://www.devze.com 2023-04-12 15:16 出处:网络
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.

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!

0

精彩评论

暂无评论...
验证码 换一张
取 消