简体   繁体   中英

html5 video fullscreen with streaming hls

I have a bit of problem with streaming hls using video tag.

Originally I'm using flowplayer with the fallback flowplayer.ipad.js, it actually just generate video for using on fail to use flash (such as ipad). ANW i see that it's use video tag for those device (i'm using it for android device too).

Simply said, this code actually can run on android:

<video id="testchoi" width="320"  height="240" controls preload>
<source src="some_hls_stream_here.m3u8"/>
</video>

add type='application/vnd.apple.mpegurl' and it can run on ipad.
But put that aside, I want to asking that in android, if you change size while playing, it will get error. More specify, playing it and then go for fullscreen.
I think there's problem because google do not much support for hls (since it's apple standard ANW). Is there anyway to work around?
I'm trying to do something like:
beforeEnterFullscreen => stop video => enterFullscreen => reLoad video => play video. Any help in this too, I can't add the eventListener for fullscreen event

Found out the event for full screen in those device.

player.addEventListener('webkitbeginfullscreen', function(){
            this.load();
            this.play();
          }, false);
          player.addEventListener('webkitendfullscreen', function(){
            this.load();
            this.play();
          }, false);

Last time i tried with webkitenterfullscreen, it's no use in mobile device. And until now, i can just come up with above work around.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM