简体   繁体   English

带有流式 hls 的 html5 视频全屏

[英]html5 video fullscreen with streaming hls

I have a bit of problem with streaming hls using video tag.我在使用视频标签流式传输 hls 时遇到了一些问题。

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).最初我使用 flowplayer 和后备 flowplayer.ipad.js,它实际上只是生成视频以用于无法使用 flash(例如 ipad)。 ANW i see that it's use video tag for those device (i'm using it for android device too). ANW 我看到它为这些设备使用了视频标签(我也将它用于 android 设备)。

Simply said, this code actually can run on android:简单的说,这段代码其实可以在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.添加 type='application/vnd.apple.mpegurl' 它可以在 ipad 上运行。
But put that aside, I want to asking that in android, if you change size while playing, it will get error.但抛开这一点,我想问一下在android中,如果你在玩的时候改变大小,它会出错。 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).我认为有问题,因为谷歌对 hls 的支持不多(因为它是苹果标准的 ANW)。 Is there anyway to work around?有没有办法解决?
I'm trying to do something like:我正在尝试执行以下操作:
beforeEnterFullscreen => stop video => enterFullscreen => reLoad video => play video. beforeEnterFullscreen => 停止视频 => enterFullscreen => 重新加载视频 => 播放视频。 Any help in this too, I can't add the eventListener for fullscreen event对此也有任何帮助,我无法为全屏事件添加 eventListener

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.上次我尝试使用 webkitenterfullscreen 时,它在移动设备中没有用。 And until now, i can just come up with above work around.直到现在,我才能想出上述解决方法。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

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