h5移动端视频播放打包安卓&ios失效解决方案

之前写h5页面，开发中使用dplayer和vue-video-player都正常播放，但是通过打包工具打成安卓或者ios后就只有声音没有画面了，后面测试视频格式发现应该是格式问题。

然后尝试用下载到本地再播放的方法，有效。

具体代码下面展示，直接复制即可。（需修改文件资源地址）

备注：此方法调用的是HTML5+API（因为其中用到plus，所以每次写完需要打包安卓到模拟器上才能看到效果，比较麻烦。或者可以在hbuilder工具中修改配置文件manifest.json中的应用入口为本地服务地址，再 运行-运行到手机或者模拟器上可以实时看到修改后）。官网地址：HTML5+ API Reference

<div

 class="video-name"

 v-for="(i, index) in form.videoList"

 :key="index"

 @click="playVideo(i)"

 >

   {{ i.fileName }}

</div>

 playVideo(i) {  

            this.$toast('下载视频')

            //视频资源下载地址
            let picurl = `${this.baseUrl}/attache/downLoad/${i.id}`

            // 参数(文件名称)

            let name = '视频.mp4'

            let datas = {

                //自定义下载文件路径，保存文件路径仅支持以"_downloads/"、"_doc/"、"_documents/"开头的字符串

                filename: '_doc/' + name,

                //默认为GET请求。注意这里需大写“GET”、“POST”

                method: 'GET'

                //可以携带参数
                // data: qsParams 

            }

            let dtask = plus.downloader.createDownload(

                picurl,

                datas,

                (d, status) => {

                    // 下载完成

                    if (status == 200) {

                        this.$toast('正在打开')

                        //下载成功,d.filename是文件在保存在本地的相对路径，使用下面的API可转为平台绝对路径

                        var fileSaveUrl = plus.io.convertLocalFileSystemURL(

                            d.filename

                        )

                        plus.runtime.openFile(d.filename) //选择软件打开文件

                    } else {

                        console.log('下载失败')

                        dtask.clear() //清除下载任务

                        this.$toast('下载失败')

                    }

                }

            )

            dtask.setRequestHeader('Content-Type', 'application/json')

            dtask.setRequestHeader(

                'Authorization',

                'Bearer ' + this.$store.state.token

            )

            // 开始下载

            dtask.start()

            const that = this

            this.webview = null

}