Android WebView Video完全详解(第二篇)-H5前端开发人员
发布日期:2021-06-23 19:02:46
浏览次数:11
分类:技术文章
本文共 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 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!
发表评论
最新留言
做的很好,不错不错
[***.243.131.199]2024年03月25日 04时14分08秒
关于作者
喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!
推荐文章
java servlet 返回 web_javaWEB之Servlet
2019-04-21
java poi_Java POI(第一讲):POI简介
2019-04-21
java中常见的设计模式_在Java中10种常见设计模式详细介绍
2019-04-21
java json 长度限制_解决MVC中JSON字符长度超出限制的异常
2019-04-21
棋盘覆盖问题 java_java解决棋盘覆盖问题
2019-04-21
%02x java_java基础---->Java的格式化输出
2019-04-21
python开头编码cc手_python的编码问题整理
2019-04-21
java 虚拟方法_Java中的虚拟方法virtual method是什么含义
2019-04-21
weixin java tools_weixin-java-tools(微信开发工具包)
2019-04-21
编写一个java_编写一个java程序,
2019-04-21
java隔行读取存入数组_JAVA将任意txt文档中的内容分行存入数组
2019-04-21
java xml原理_java – XML命名空间的工作原理
2019-04-21
java一个字符串出现的次数_java计算某个字符串中每次字符出现的次数
2019-04-21