美文网首页っ碎片化代码
‘SVideo’—使用MUI做视频上传第二弹

‘SVideo’—使用MUI做视频上传第二弹

作者: CodexBai | 来源:发表于2019-06-01 11:22 被阅读3次

之所以用“弹”不用“谈”,是弹弹弹...

在使用MUI来开发接近原生App的体验效果时,遇到很多坑。比如视频拍摄时,如果不考虑视频时长,使用H5+plus API还是比较可观的,但你若使用了NJS的方式去使用原生的摄像头录制方式的话,需要设置其像素为高才能达到好的体验(但某厂的设备在高像素下不支持)。所以这就需要你去开发SDK插件,可以使用三方的视频录制插件(目前还未进行开发)。
在这里我使用的NJS的方式去录制,后续会编写一套使用三方录制视频的Demo,敬请期待吧。

1. 点击按钮
<a id="videoCam" class="mui-icon mui-icon-videocam mui-pull-left"></a>
2. 监听按钮调用原生摄像头拍摄视频
//拍摄视频
function captureVideo() {
    var TIMEOUT = 5; //录像时间 5 秒
    // 调用原生android摄像头
    var VIDEOZOOM = 200;
    var MediaStore = plus.android.importClass("android.provider.MediaStore");
    var Intent = plus.android.importClass("android.content.Intent");
    // 导入后可以使用new方法创建类的示例对象
    var intent = new Intent("android.media.action.VIDEO_CAPTURE");
    intent.putExtra("android.intent.extra.videoQuality", 0); //0 means low quality, 1 means high quality
    intent.putExtra("android.intent.extra.durationLimit", TIMEOUT); //设置录像时间,5秒钟

    var main = plus.android.runtimeMainActivity();
    main.startActivityForResult(intent, VIDEOZOOM);
    // 获取返回参数
    main.onActivityResult = function(requestCode, resultCode, data) {
        if (requestCode == 200 && resultCode == -1) {
            var context = main;
            plus.android.importClass(data);
            var uri = data.getData();
            var resolver = context.getContentResolver();
            plus.android.importClass(resolver);
            var cursor = resolver.query(uri, null, null, null, null);
            plus.android.importClass(cursor);
            cursor.moveToFirst();
            var column = cursor.getColumnIndexOrThrow(MediaStore.Video.Media.DATA);
            // 获取录制的视频路径
            var path = cursor.getString(column);
            if (path) {
                mui.openWindow({
                    url: "videocam.html",
                    id: "videocam",
                    extras: {
                        videoPathUrl: path
                    },
                    createNew: false, //是否重复创建同样id的webview,默认为false:不重复创建,直接显示
                });
            } else {
                mui.toast("录制小视频失败!");
            }
        } else {
            mui.toast("您取消了录制视频!");
        }
    }
}

在上面代码中,我们在录制完成后会获取到视频的路径。我们通过mui.openWindow()函数并传值在新页面进行视频上传。

相关文章

  • ‘SVideo’—使用MUI做视频上传第二弹

    之所以用“弹”不用“谈”,是弹弹弹... 在使用MUI来开发接近原生App的体验效果时,遇到很多坑。比如视频拍摄时...

  • ‘SVideo’视频上传

    对于视频上传与图片上传没有多大区别,主要在我们对视频的处理,如截取某一帧作为封面图,获取视频时长等。 对视频处理我...

  • ‘SVideo’ UI第一版

    我们选择 DCould 的 MUI 框架来开发我们的‘SVideo’ APP,主要是因为能够速成 ^ _ ^。 我...

  • mui视频播放代码分享_HBuilder教程

    mui 视频播放代码 注意:需要在配置里加入 视频播放器SDK 才能使用MUI原生播放器 mui 视频播放代码分享...

  • HTML5调用手机摄像机、相册功能 方法

    最近用MUI框架做webapp项目,在有PLUS环境的基础上能直接调用手机底层的API来使用拍照或从相册选择上传功...

  • 目录【MUI教程】

    MUI系列教程目录(文档+视频 [视频链接在文档教程中] ) 001-跨平台开发-MUI-认识MUI 002-跨平...

  • 好事多磨难

    今天工作上遇到一个比较棘手的问题。mui视频文件压缩上传到oss操作,经过研究打通文件到oss成功上传,其实可以把...

  • H5+APP混合开发上传图片

    1:结合mui框架进行图片上传,plus.nativeUI.actionSheet弹出系统选择按钮框, mui.i...

  • MUI框架—其他方法

    mui() MUI框架使用CSS选择器获取HTML元素,返回MUI对象的数组。mui("p"):选取所有 元素...

  • mui使用pullrefresh后,里面的点击事件失效

    我们的项目是mui做的,除了使用mui的js和css外还引入了jquery与渲染数据的template-web.j...

网友评论

    本文标题:‘SVideo’—使用MUI做视频上传第二弹

    本文链接:https://www.haomeiwen.com/subject/fwmotctx.html