针对在webview模式中,小米魅族手机不支持html5原生video的control的解决办法![原创]
2016-08-03 09:30
603 查看
其实,解决办法就是,重新写个control控制功能,.同样用流行的video.js可以实现
第一步就是增加个播放的图片..要不然没有按钮多难看!
上面的视频链接是那个那个河南卫视的直播,,闲了可以自己写个video看直播
这第二步自然就是控制方法拉.其实很简单,会js的估计都会写,我抛砖引玉.....
在ios等设备上,对video的解析,即使你没有使用control属性.他也会在你视屏的中间,放一个原生的播放按钮,所以我要判断设备,把我之前加的播放按钮给移除....懂了吧....这时候,有人又要问了.,那android呢?其实android在你不加control属性的时候,上面是什么也没有的...所以android不用考虑拉...这时候,又有人问了...咳咳咳...那个你自己的图片跟ios原生的不一样,岂不是,android跟iPhone的样式看着都不一样了...
废话不多说 ..这个解决方法,着重解决了在webview模式中,一些不支持video,,,例如小米,魅族..为啥他们不支持,,,我也不知道,,要是有知道的,欢迎留言告知.
该内容为原创,引用请注明出处,,谢谢..再来一个,,么么哒~
第一步就是增加个播放的图片..要不然没有按钮多难看!
<div class="videoDiv"> <video id="video" poster="" preload="metadata" width="100%" height="100%" autoplay="autoplay" x-webkit-airplay="allow" webkit-playsinline> <source src="http://125.88.92.166:30001/PLTV/88888956/224/3221227739/1.m3u8" type='application/x-mpegURL' /> </video> <img class="playImg" src="img/play.png"> </div>
上面的视频链接是那个那个河南卫视的直播,,闲了可以自己写个video看直播
这第二步自然就是控制方法拉.其实很简单,会js的估计都会写,我抛砖引玉.....
$(document).ready(function(){ /***********判断浏览器ua类型**********************/ var n=navigator.userAgent.toLowerCase(); if(/iphone|ipad|ipod/.test(n)){ $(".playImg").remove(); } /**************************视频控制*********************************************/ function fPlayVideo(){ $(".playImg").click(function(event) { var myVideo = document.getElementsByTagName('video')[0]; if (myVideo.paused){ myVideo.play(); $(".playImg").css('display','none'); } else{ myVideo.pause(); } }); $("video").click(function(event){ var myVideo = document.getElementsByTagName('video')[0]; if (myVideo.paused){ myVideo.play(); $(".playImg").css('display','none'); } else{ myVideo.pause(); $(".playImg").css('display','block'); } }); $("video").bind("ended",function(){ $(".playImg").css('display','block'); }); } $(function(){ fPlayVideo(); }); });
在ios等设备上,对video的解析,即使你没有使用control属性.他也会在你视屏的中间,放一个原生的播放按钮,所以我要判断设备,把我之前加的播放按钮给移除....懂了吧....这时候,有人又要问了.,那android呢?其实android在你不加control属性的时候,上面是什么也没有的...所以android不用考虑拉...这时候,又有人问了...咳咳咳...那个你自己的图片跟ios原生的不一样,岂不是,android跟iPhone的样式看着都不一样了...
废话不多说 ..这个解决方法,着重解决了在webview模式中,一些不支持video,,,例如小米,魅族..为啥他们不支持,,,我也不知道,,要是有知道的,欢迎留言告知.
该内容为原创,引用请注明出处,,谢谢..再来一个,,么么哒~
相关文章推荐
- Android编程使WebView支持HTML5 Video全屏播放的解决方法
- Android 使WebView支持HTML5 Video(全屏)播放的方法
- 关于Android WebView不支持location.href打开的解决方法 小米部分机型
- 解决魅族、小米特定机型有WebView页面的图形失真问题
- nginx低版本不支持pathinfo模式,thinkphp针对此问题的解决办法
- 使用Cordova来解决HTML5制作的WebView手机不兼容的问题
- WebView 支持 Html5 video 进行全屏播放
- Android 使WebView支持HTML5 Video(全屏)播放的方法
- EasyJSWebView二次加载时JS无法调用原生代码解决办法
- Android 使WebView支持HTML5 Video(全屏)播放的方法
- 微信小程序添加web-view业务域名,"不支持打开非业务域名"解决办法
- Android WebView或手机浏览器打开连接问题解决办法总结
- Android 使WebView支持HTML5 Video(全屏)播放的方法
- webview和html5交互点击崩溃的问题+解决办法
- 【转】 android WebView使用cmwap无法联网解决办法
- android WebView使用cmwap无法联网解决办法
- 新浪微博Oauth2.0在不支持HTML5的手机授权显示空白页的解决方法
- Android 3.0 以上系统 webView 无法在html中传值的解决办法
- WebView无法播放视频的解决办法
- 【原创】如何在wince5.0 中支持SQLCE3.5 CN——内含解决办法(作者:gooogleman)