samshum22
samshum22
  • 发布:2021-06-23 17:13
  • 更新:2021-06-24 11:10
  • 阅读:338

【报Bug】video組件 使用動態 :src 時,會進入量子糾纏狀態(可執行/也可不執行)

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Windows

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

HBuilderX类型: 正式

HBuilderX版本号: 3.1.17

手机系统: Android

手机系统版本号: Android 7.1.1

手机厂商: 安桌盒子

手机机型: 安桌盒子

页面类型: vue

打包方式: 云端

项目创建方式: HBuilderX

示例代码:

全頁代碼可直接貼上,另外請建立兩條10秒鐘左右的短mp4,位置及名稱如下:
"/storage/emulated/0/your_App/1-1-1/gg.mp4",
"/storage/emulated/0/your_App/1-1-1/ff.mp4",
然後getMedia()分別各自return 以下內容
return this.playingDict[key]['src'][this.playingDict[key]['counter']] //含計算步驟<<<<<<<<<<<

return "/storage/emulated/0/your_App/1-1-1/gg.mp4" //不含計算步驟 <<<<<<<<<<<
含計算步驟 會在打印'end'後打印'print me'
不含計算步驟 只會在打印一開頭打印'print me'

<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 API 動態src時:
如果getMedia() 內不含計算步驟就不執行getMedia() 內的命令
如果getMedia() 含計算步驟就會執行getMedia() 內的命令:

<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"  //不含計算步驟  
    },  
2021-06-23 17:13 负责人:无 分享
已邀请:
samshum22

samshum22 (作者)

也不是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]  
    },
samshum22

samshum22 (作者)

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

该问题目前已经被锁定, 无法添加新回复