Android WebView Video完全详解(第二篇)-H5前端开发人员
发布日期:2021-06-23 19:02:46 浏览次数:13 分类:技术文章

本文共 1960 字,大约阅读时间需要 6 分钟。

转载请注明出处

Author:ruanjianjiagou@163.com
背景
第一篇详解主要是讲解Android客户端需要开发的内容,本篇主要是讲前端在开发中需要特别主要的一个点,全屏播放,ios不用做处理可以直接全屏,而Android客户端需要js特别执行下。


Android WebView Video完全详解(第一篇)-Android开发人员

Android需要做的工作~ 传送门

需要注意的点

android客户端无法全屏,需要特殊的js处理下,而且js的执行需要前端判断下当前运行

以上就是特别处理的点,大概是需要点击的时候主动调一下全屏的方法,一定是只有android才加载这个js


再来一段更直接的直接给你判断好

var fullscreen = function(elem) {
var prefix = 'webkit'; if ( elem[prefix + 'EnterFullScreen'] ) { return prefix + 'EnterFullScreen'; } else if( elem[prefix + 'RequestFullScreen'] ) { return prefix + 'RequestFullScreen'; }; return false;};function autoFullScrenn(v){
var ua = navigator.userAgent.toLowerCase(); var Android = String(ua.match(/android/i)) == "android"; // if(!Android) return;//非android系统不使用; var video = v,doc = document; var fullscreenvideo = fullscreen(doc.createElement("video")); if(!fullscreen) { alert("不支持全屏模式"); return; } video.addEventListener("webkitfullscreenchange",function(e){
if(!doc.webkitIsFullScreen){
//退出全屏暂停视频 this.pause(); // this.pause(); }; }, false); video.addEventListener("click", function(){
this.play(); video[fullscreenvideo](); }, false); video.addEventListener('ended',function(){
doc.webkitCancelFullScreen(); //播放完毕自动退出全屏 },false);};// autoFullScrenn(video_obj)

举个栗子

  
JS Bin

No Poster Attribute

Poster Attribute

No Controls

3个video 分别展示三种对视频全屏按钮的样式

Android开发人员可以直接把这个文件拷贝下 名字随便index.html
就可以扔在本地调试了。

demo会有更直接的,不想动手的就直接去下载吧。


戳我下载~

转载地址:https://blog.csdn.net/u014513456/article/details/54381527 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!

上一篇:友盟分享本地图片到微信无法调起微信解决方案
下一篇:Android WebView Video完全详解(第一篇)-Android开发人员

发表评论

最新留言

哈哈,博客排版真的漂亮呢~
[***.90.31.176]2024年03月19日 15时38分00秒

关于作者

    喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!

推荐文章