vue项目动态src ,video无法正常播放问题记录

vue项目动态src ,video无法正常播放问题记录

问题记录

在vue2项目中,mp4视频地址由后端异步请求获取,使用静态的url时视频能够正常播放,异步请求获取视频地址,:src='“url” 视频出现无法播放的问题

文章目录

问题记录测试代码测试1测试2测试3插件地址

测试代码

后端返回的数据

// 文档 (https://flowercloud.net/aff.php?aff=11050)

{

"code": 200,

"msg": "test",

"data": "https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/byted-player-videos/1.0.0/xgplayer-demo.mp4"

}

// 文档 (https://flowercloud.net/aff.php?aff=11050)

提示:以下是本篇文章正文内容,下面案例可供参考

测试1

将url 绑定在video标签的src属性上,vue实例的data中 data.url 没有初值也可以正常播放

// 文档 (https://flowercloud.net/aff.php?aff=11050)

data() {

return {

data: {

url: ''

}

};

},

测试2

将url 绑定在video标签内source 标签的src属性上,vue实例的data中 data.url 不管有没有初值都无法播放后端传输的url,有初始值播放的是有初始值的视频

// 文档 (https://flowercloud.net/aff.php?aff=11050)

Download the

MP4

video.

data() {

return {

data: {

url: 'https://media.w3.org/2010/05/sintel/trailer.mp4'

}

};

},

测试3

将url 绑定在vue-core-video-player插件的src属性上,vue实例的data中 data.url 有初值可以正常播放

// 文档 (https://flowercloud.net/aff.php?aff=11050)

data() {

return {

data: {

url: 'https://media.w3.org/2010/05/sintel/trailer.mp4'

}

};

},

插件地址

文档目录: vue-core-video-player

相关推荐

平板安卓office365破解版 真空炉中的氩气和氮气冷却有何不同?更好热处理的关键见解

真空炉中的氩气和氮气冷却有何不同?更好热处理的关键见解

📅 07-07 👁️ 6922
平板安卓office365破解版 探秘汉字“栉”的读音、意义及其文化内涵解析

探秘汉字“栉”的读音、意义及其文化内涵解析

📅 07-04 👁️ 1675
平板安卓office365破解版 多久手淫一次算适当?心里终于有数了......

多久手淫一次算适当?心里终于有数了......

📅 07-02 👁️ 4040