m***@wyou.ltd

发布：2023-03-18 17:16
更新：2023-03-20 16:47
阅读：369

【报Bug】video组件iOS设置header无效，安卓可以

分类：uni-app

video VideoPlayer iOS

产品分类： uniapp/App

PC开发环境操作系统： Mac

PC开发环境操作系统版本号： 13.0.1

HBuilderX类型：正式

HBuilderX版本号： 3.6.18

手机系统： iOS

手机系统版本号： iOS 16

手机厂商：苹果

手机机型： iphonex

页面类型： nvue

vue版本： vue2

打包方式：离线

项目创建方式： HBuilderX

示例代码：

<video  
    :id="1"  
    :header="header"  
    src="https://xxx.m3u8"  
        @error="playError"  
></video>

data() {  
    return {  
        header:{cookie:"xxx"}  
    }  
}

methods: {  
     playError(err) {  
    console.log('err==>'+JSON.stringify(err))  
     },  
}

操作步骤：

使用苹果手机，nvue文件中的video组件，设置src和header的属性值，看能否播放

预期结果：

设置header，也能播放

实际结果：

能直接访问的地址是能播放的，而需要设置header的地址，不能播放，且无法触发error回调。

bug描述：

在iOS设备上，使用video组件播放m3u8格式视频，如果视频地址能直接访问，视频是能正常播放的。但开发需求是要对视频文件加密，需要在请求视频地址时设置请求头cookie，官方文档写了video组件能设置header，但实际测试，并不能设置成功，导致视频播放失败，而且没有触发error回调。但在安卓设备上，能正常设置header并播放。

2023-03-18 17:16 负责人:DCloud_iOS_XHY 分享

1 个回复

DCloud_iOS_XHY

两端使用的三方播放器SDK实现有点差异，iOS端Video组件初始化的时候就要传入header，可以优化一下代码逻辑给 video 加个v-if 当header请求成功的时候再开始渲染Video组件，这样应该就可以解决你的问题了

m***@wyou.ltd (作者)

问题解决，感谢

2023-03-20 17:18

要回复问题请先登录或注册

【报Bug】video组件iOS设置header无效，安卓可以

示例代码：

`<video :id="1" :header="header" src="https://xxx.m3u8" @error="playError" ></video>`

`data() { return { header:{cookie:"xxx"} } }`

`methods: { playError(err) { console.log('err==>'+JSON.stringify(err)) }, }`

操作步骤：

使用苹果手机，nvue文件中的video组件，设置src和header的属性值，看能否播放

预期结果：

设置header，也能播放

实际结果：

能直接访问的地址是能播放的，而需要设置header的地址，不能播放，且无法触发error回调。

bug描述：

1 个回复

公告

相关问题

【报Bug】video组件iOS设置header无效，安卓可以

示例代码： <video :id="1" :header="header" src="https://xxx.m3u8" @error="playError" ></video> data() { return { header:{cookie:"xxx"} } } methods: { playError(err) { console.log('err==>'+JSON.stringify(err)) }, }

操作步骤： 使用苹果手机，nvue文件中的video组件，设置src和header的属性值，看能否播放

预期结果： 设置header，也能播放

实际结果： 能直接访问的地址 是能播放的，而需要设置header的地址，不能播放，且无法触发error回调。

bug描述：

与内容相关的链接

1 个回复

公告

相关问题

示例代码：

`<video :id="1" :header="header" src="https://xxx.m3u8" @error="playError" ></video>`

`data() { return { header:{cookie:"xxx"} } }`

`methods: { playError(err) { console.log('err==>'+JSON.stringify(err)) }, }`

操作步骤：

使用苹果手机，nvue文件中的video组件，设置src和header的属性值，看能否播放

预期结果：

设置header，也能播放

实际结果：

能直接访问的地址是能播放的，而需要设置header的地址，不能播放，且无法触发error回调。