扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
一般是浏览器里禁用,进入浏览器设置找到隐私或高级或扩展功能,再找到js并开启即可。具体要看是哪个浏览器里提示,不同浏览器操作也略有不同。
专注于为中小企业提供成都网站设计、做网站服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业贵德免费做网站提供优质的服务。我们立足成都,凝聚了一批互联网行业人才,有力地推动了近1000家企业的稳健成长,帮助中小企业通过网站建设实现规模扩充和转变。
在安卓手机上,使用video播放视频有个问题,video控件层级会永远在顶层,不利于视频互动H5开发,而IOS手机上不会有此问题。
video src="" x5-video-player-type="h5"/
x5-video-player-type="h5" 只适用于微信浏览器
注意:
1.jsmpeg 需要将视频转为.ts的文件
先安装ffmpeg,然后执行以下命令,将mp4格式的文件转成 .ts(用命令行转的才能正常播放)
ffmpeg -i video.mp4 -f mpegts -codec:v mpeg1video -codec:a mp2 out.ts(文件的路径不太好找,建议全局搜索一下)
2.安卓上使用jsmpeg插件渲染canvas,ios上正常使用video并加入隐藏控制条等设置
3. 请使用此js,原作者的js没有回调设置
4. 原作者github地址
!DOCTYPE html
html lang="en"
head
meta charset="UTF-8"
titleJSMpegPlayer/title
meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0"
style
html,body{
padding: 0;
margin: 0;
}
.msg-wrap{
position: fixed;
top: 0;
left: 0;
background: #fff;
border: 1px solid #000;
}
.video-wrap{
width: 100%;
display: none;
}
/style
/head
body
video class="video-wrap" id="video-ios" x5-playsinline webkit-playsinline playsinline src="1_BG_4s_2.mp4"/video
canvas class="video-wrap" id="video-android"/canvas
div class="msg-wrap" id="msgTxt"loading.../div
script src=""/script
script
var msgTxt = document.getElementById('msgTxt');
var video = document.getElementById('video-ios');
var canvas = document.getElementById('video-android');
//检测是否为非安卓浏览器并作处理
var check = !! navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
if(check){
msgTxt.innerHTML = "not Android mode"
video.style.display="block"
video.play()
//监听video加载完成
video.addEventListener("loadedmetadata",function(){
msgTxt.innerHTML = "not Android mode:videoPlaying"
})
//监听video播放结束
video.addEventListener("ended",function(){
msgTxt.innerHTML = "not Android mode:videoEnd"
})
}else{
// jsmpegPlay(canvas,'1_BG_4s_5.ts',startCallBack,playingCallBack,endCallBack)
jsmpegPlay(canvas,'out.ts',startCallBack,playingCallBack,endCallBack)
}
function jsmpegPlay(Vcanvas,vVideo,startFun,playingFun,endFun) {
var player = new JSMpeg.Player(
vVideo ,{
canvas: Vcanvas,
loop: false,
autoplay: true,
startSign: true,
startCallBack: startFun,
playingCallBack: playingFun,
endCallBack: endFun
});
}
//视频开始播放(即解码完成)执行
function startCallBack() {
msgTxt.innerHTML = "Android mode:videoPlaying"
canvas.style.display="block"
}
//视频播放进度
function playingCallBack(currentTime) {
// console.log(currentTime)
}
//视频播放完成执行
function endCallBack() {
msgTxt.innerHTML = "Android mode:videoEnd"
}
/script
/body
/html
项目中遇到的坑,把使用方法记录一下
在线演示DOMO
JSMpegPlayer
github地址,欢迎小星星~~~
1、设置webview对js的支持
2、在html中添加 evaluateNativeToJS 方法
3、在Android中调用 evaluateNativeToJS 方法
1、创建js调用的接口(添加js要调用的方法 evaluateJsToNative)
2、设置webview对js的支持
3、js调用 evaluateJsToNative方法
onclick="window.Android.show()"
你的语法写错了,js调用Android要用window.TAG
这个TAG就是
webView.addJavascriptInterface(new Object(), TAG); // 设置javaScript可用于操作Activity类
看你的代码,你传递了一个Android
因此你的js里应改成window.Android.show();
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流