Native.js调用android原生播放video视频MUI

Native.js调用android原生播放video视频MUI

写一个统一的播放器样式

<div class="video mui-row">

    <div class="rewind mui-col-sm-1 mui-col-xs-1 mui-text-left">

        <span class="mui-icon iconfont icon-year_prev"></span>

    </div>

    <div class="play mui-col-sm-12 mui-col-xs-12 mui-text-center" id="start"></div>

    <div class="speed mui-col-sm-1 mui-col-xs-1 mui-text-right">

        <span class="mui-icon iconfont icon-ai19"></span>

    </div>

    <div class="progress mui-col-sm-12 mui-col-xs-12">

        <span>00:00/00:00</span>

        <b></b>

        <div><span class="mui-icon iconfont icon-quanping1"></span></div>

    </div>

</div>

HTML5有video标签,iOS可以直接用。Android上video标签不流畅,可以通过5+来解决。

本地视频可以使用plus API调用本地应用播放:
plus.runtime.openFile()

网络视频可以通过native.js调用

document.addEventListener( "plusready", function(){ 

    var Intent = plus.android.importClass("android.content.Intent");

    var Uri = plus.android.importClass("android.net.Uri");

    var main = plus.android.runtimeMainActivity();

    var intent = new Intent(Intent.ACTION_VIEW);

    var uri=Uri.parse("http://www.baidu.com/try/1.mp4");//网络视频地址

    intent.setDataAndType(uri,"video/*");

    mui("body").on('tap', '#start', function(){

        main.startActivity(intent);

    });

}, false ); 

不管是哪种方式,如果遇到视频只有声音没有图像,是因为系统关闭了硬件加速。

但是也不要在Android5上默认就打开硬件加速,有的Android5对硬件加速兼容有问题,所以只在视频播放页面打开硬件加速即可。在创建webview时style里有个hardwareAccelerated参数,设置为true。

mui.openWindow({

    id: "book/video.html",

    url: "book/video.html",

    show: {

    aniShow: 'zoom-fade-out',

        duration: 200

    },

    waiting: {

        autoShow: false

    },

    styles: {

        hardwareAccelerated: true

    }

});

转载于:https://my.oschina.net/af666/blog/863955