html全屏播放一段视频,显示HTML5视频全屏(Show HTML5 Video Fullscreen)

这对我的作品。

我发现在使Web应用程序与VIMEO影片“怪癖解决方案”。 我测试了两种设备。 一个是Android的4.2.x版的版本,另一种是4.4.x到版本。 一个是能够以全屏模式播放视频,另一种是不能够。

阅读正式文件“后的Android 4.4系统迁移到的WebView ”,我发现有两个不同的设备“的UserAgent的名字。

其中有这样的userAgent。

Mozilla/5.0 (Linux; Android 4.4.2; SHV-E300L Build/KOT49H) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/30.0.0.0 Mobile Safari/537.36

另一个有这个。

Mozilla/5.0 (Linux; Android 4.4.4; SHV-E370K Build/KTU84P) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/33.0.0.0 Mobile Safari/537.36

我觉得Chrome版本进行全屏视频的解决方案。 所以我改变了镀铬版本30.x.

WebSettings s = mWebView.getSettings();

//Change UserAgent to play fullscreen vimeo's videos.

String agent = s.getUserAgentString();

String p = "(Chrome/[0-9]+\\.[0-9]+\\.[0-9]+\\.[0-9]+)";

Pattern pattern = Pattern.compile(p);

Matcher matcher = pattern.matcher(agent);

if(matcher.find()) {

agent = matcher.replaceFirst("Chrome/30.0.0.0");

}

s.setUserAgentString(agent);

呵呵~~我可以睡...(我的英语不好对不起)

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要在网页中实现全屏显示视频的效果,可以使用HTML5的`<video>`标签来嵌入视频,并且使用CSS样式来让视频占据整个视口的大小。 HTML代码结构: ```html <video class="fullscreen-video" autoplay loop muted> <source src="video.mp4" type="video/mp4"> <source src="video.webm" type="video/webm"> Your browser does not support the video tag. </video> ``` 在上面的代码中,我们使用`<video>`元素来嵌入视频,并且使用`class`属性来设置样式。然后我们使用`<source>`元素来指定不同格式的视频文件。最后,我们使用`Your browser does not support the video tag.`作为备用文本,如果浏览器不支持`<video>`元素,则会显示这段文本。 CSS样式: ```css body, html { margin: 0; padding: 0; height: 100%; } .fullscreen-video { position: fixed; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; } ``` 在上面的代码中,我们使用`body, html`选择器来让整个页面占据整个视口高度,并且去除默认的边距和内边距。然后我们使用`.fullscreen-video`类来设置视频的样式,包括将视频设置为固定定位,占据整个视口的大小,填充整个区域,以及将视频设置在最下面的图层。 需要注意的是,如果想要让视频自适应屏幕大小,可以使用`object-fit: cover;`属性来填充整个区域。如果想要让视频循环播放,可以设置`loop`属性。如果想要静音播放,可以设置`muted`属性。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值