uni-app video组件使用动态:src时，会进入异常状态（可执行/也可不执行）

uni-app video组件使用动态:src时，会进入异常状态（可执行/也可不执行）

产品分类

  • uniapp/App

PC开发环境操作系统

  • Windows

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

  • windows10

HBuilderX类型

  • 正式

HBuilderX版本号

  • 3.1.17

手机系统

  • Android

手机系统版本号

  • Android 7.1.1

手机厂商

  • 安桌盒子

手机机型

  • 安桌盒子

页面类型

  • vue

打包方式

  • 云端

项目创建方式

  • HBuilderX

示例代码：

<template>  
    <view>  
        <view v-for="(myObject,key,myIndex)  in playingDict">  
            <video class="myVideo" :src="getMedia(key)" @ended="playEnd(key)" show-loading=false controls=false autoplay  
                loop :style='  
                "left:"+0+"px;"+  
                "top:"+0+"px;"+  
                "width:"+640+"px;"+  
                "height:"+360+"px;"  
                '>视频</video>  
        </view>  
    </view>  
</template>  

<script>  
    export default {  
        data() {  
            return {  
                staticPath: "/storage/emulated/0/your_App/",  
                playingDict: {  
                    "AA":{  
                        "src":[  
                            "/storage/emulated/0/your_App/1-1-1/gg.mp4",  
                            "/storage/emulated/0/your_App/1-1-1/ff.mp4"],  
                        "counter":0,  
                        'left':0,  
                        'top':0,  
                        'width':640,  
                        'height':360  
                    },  
                },  
            }  
        },  
        onLoad() {  
            console.log('onLoad')  
        },  
        onReady() {},  
        methods: {  
            getMedia(key){  
                console.log('print me')  
                return this.playingDict[key]['src'][this.playingDict[key]['counter']] //含計算步驟  
                // return "/storage/emulated/0/your_App/1-1-1/gg.mp4"       //不含計算步驟  
            },  
            playEnd(key){  
                this.playingDict[key]['counter'] += 1  
                console.log('end')  
            }  
        },  
        watch: {}  
    }  
</script>  

<style>  
    .myVideo {  
        position: absolute;  
    }  
</style>

操作步骤：

return this.playingDict[key]['src'][this.playingDict[key]['counter']] //含計算步驟  
// return "/storage/emulated/0/your_App/1-1-1/gg.mp4"       //不含計算步驟

预期结果：

17:11:54.048 end at pages/play/test3.vue:46
17:11:54.071 print me at pages/play/test3.vue:40
17:12:09.462 end at pages/play/test3.vue:46
17:12:09.493 print me at pages/play/test3.vue:40
17:12:24.899 end at pages/play/test3.vue:46
17:12:24.935 print me at pages/play/test3.vue:40
17:12:40.273 end at pages/play/test3.vue:46
17:12:40.299 print me at pages/play/test3.vue:40
17:12:55.720 end at pages/play/test3.vue:46
17:12:55.752 print me at pages/play/test3.vue:40

实际结果：

17:11:54.048 end at pages/play/test3.vue:46
17:12:09.462 end at pages/play/test3.vue:46
17:12:24.899 end at pages/play/test3.vue:46
17:12:40.273 end at pages/play/test3.vue:46
17:12:55.720 end at pages/play/test3.vue:46

bug描述：

<video class="myVideo" :src="getMedia(key)" @ended="playEnd(key)" show-loading=false controls=false autoplay  
    loop :style='  
    "left:"+0+"px;"+  
    "top:"+0+"px;"+  
    "width:"+640+"px;"+  
    "height:"+360+"px;"  
    '>视频</video>  

methods: {  
    getMedia(key){  
        console.log('print me')  
        return this.playingDict[key]['src'][this.playingDict[key]['counter']]  //含計算步驟  
        // return "/storage/emulated/0/your_App/1-1-1/gg.mp4"  //不含計算步驟  
    },

更多关于uni-app video组件使用动态:src时，会进入异常状态（可执行/也可不执行）的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

也不是100%有計算步驟 就會執行 : 這才是最終代碼,本來想return 下一部mp4,結果只return 第一次 所以做不了輪播效果 救命…
getMedia(key) {
console.log(this.playingDict[key][‘mediaList’])
let a = [1,2,3,4]
console.log(a.length)
console.log(this.playingDict[key][‘mediaList’].length,"<<<<<<!")
let medIndex = this.playingDict[key][‘counter’] % this.playingDict[key][‘mediaList’].length
console.log(‘on9?’)
let media = this.playingDict[key][‘mediaList’][medIndex]
console.log(‘on19?’)
console.log(media)
return this.playingDict[key][‘mediaList’][medIndex]
},

更多关于uni-app video组件使用动态:src时，会进入异常状态（可执行/也可不执行）的实战教程也可以访问 https://www.itying.com/category-93-b0.html


請開發人員確認bug後,回覆一下, 以及會否有人跟進? 好向老闆交代 bug修復後本人也會捐出100元,以作感謝uniapp工作人員的貢獻

这是uni-app video组件在动态更新src时的常见问题。当video的src属性绑定到计算属性或方法时，组件内部可能不会正确触发重新渲染。

问题核心在于：video组件在检测到src变化时，不会每次都重新加载视频源。特别是在Android平台上，当新src路径与旧路径相同时（即使counter已变化），组件可能直接复用之前的视频实例。

解决方案：

  1. 使用key强制重新渲染：
<video 
  :key="getMedia(key)"
  :src="getMedia(key)"
  @ended="playEnd(key)"
  ...>
</video>
  1. 改用计算属性缓存路径：
computed: {
  videoSrc() {
    return (key) => this.playingDict[key]['src'][this.playingDict[key]['counter']]
  }
}
  1. 在playEnd方法中手动触发更新：
playEnd(key){
  this.playingDict[key]['counter'] += 1
  this.$forceUpdate() // 强制更新视图
  console.log('end')
}
  1. 避免在模板中直接调用方法，改用data属性：
// 在data中定义videoSrc
// 在playEnd中更新videoSrc值
回到顶部