Uniapp 中实现 H5 视频 播放器 的 解决方案

继之前的 MUI 5+播放器之后

http://ask.dcloud.net.cn/article/35671， 有些朋友想在 Uniapp 中使用H5播放器，该如何实现。

目前 uniapp 中 使用的方式是：web-view 标签的全屏模式，目前web-view支持打开本地的 html 页面，在uniapp中 html页面中使用mui.js和5+app一样具有同时的功能， 这种方式可以实现Uniapp跟mui 5+app 混合开发，达到实现的目的。

web-view 使用说明：https://uniapp.dcloud.io/component/web-view

首页在Uniapp 根目录，新建一个 hybrid 文件夹，再建一个 html 文件夹，在html 文件夹中存你的html页面和js /css等等文件。

扫一扫下载 Uniapp 安卓 DEMO 示例 体验

例如有三个页面： A.vue , B.vue , default.html

把 B.vue 页面 套上 web-view 标签，并且链接一个 html 本地页面

<template>  
    <web-view src="/hybrid/html/default.html" @message="meg"></web-view>  
</template>

A.vue 页面打开 B.vue 页面 , 并且A 传一个值给 B页面

uni.navigateTo({url:"../page/page?id=123"}); 

然后 B页面 再传值给 html 页面，可以通过网页地址传值，也可以使用 储存的方式传值。

<template>  
    <web-view src="/hybrid/html/default.html" @message="meg"></web-view>  
</template>  
<script>  
    export default {  
        data() {  
            return {  
                url:""  
            }  
        },  
        onLoad:function (option){  

            //为了方便跨域传值， 这里传值，采原生的储存方式记录 id  
            plus.storage.setItem("vid",option.id);   

               // this.url="/hybrid/html/default.html?id="+option.id;  

        },  
        methods: {        
            meg:function(e){  

            }  

        }  
    }  
</script>  
<style>  
    web-view{ background: #333333;}  
</style>

然后 html 页面 传值给 vue 页面， 还需要在html页面中引入官方提供的js文件。

 uni.webview.1.5.1.js

在 html页面中添加一个监听方法, 通过 uni.postMessage 方法 提交信息给 vue页面。

document.addEventListener('UniAppJSBridgeReady', function() {  

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

                                   uni.postMessage({  
                        data: {  
                            action: 'message'  
                        }  
                    });  

      });  

});

vue 页面接收值， 需要在 web-view 标签中绑定 @message 方法

<web-view src="/hybrid/html/default.html" @message="meg"></web-view>

methods: {  

meg:function(e){  

    e..detail.data // 就是html页面中 uni.postMessage 方法提交的内容           
}  

}