
Android WebView Video完全详解(第二篇)-H5前端开发人员
发布日期:2021-06-23 19:02:46
浏览次数:8
分类:技术文章
本文共 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 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!
发表评论
最新留言
留言是一种美德,欢迎回访!
[***.207.175.100]2023年09月07日 20时09分58秒
关于作者

喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!
推荐文章
【Linux】进程间通信---信号
2019-03-07
【Linux】多线程---互斥锁,同步
2019-03-07
【Linux】为什么会有互斥锁?
2021-05-10
【Linux】条件变量等待的内部实现逻辑
2019-03-07
【Linux】线程安全问题
2019-03-07
【Linux】死锁
2019-03-07
【Linux】posix版本的信号量
2019-03-07
【Linux】读写锁
2019-03-07
【网易邮箱】换绑安全手机(①之前的手机号注销了怎么办 ②网易人工客服在哪)
2019-03-07
【C++】面向对象的三大特性---继承
2019-03-07
【C++】面向对象的三大特性---多态
2019-03-07
[剑指 Offer 46.] 把数字翻译成字符串
2019-03-07
[剑指 Offer 47.] 礼物的最大价值
2019-03-07
【热题 HOT100】96. 不同的二叉搜索树
2019-03-07
【C++】智能指针详解及原理简单说明
2019-03-07
【力扣】[热题 HOT100] 98.验证二叉搜索树
2019-03-07
【力扣】[热题 HOT] 105.前序与中序遍历序列构造二叉树
2019-03-07
【进程】进程的基本概念理解
2019-03-07
【进程】wait() 函数详细分析
2019-03-07
【进程】进程间通信详解
2019-03-07