Nuxt 视频未从 URL 加载

Question

组件安装时我的视频没有加载

我已将问题缩小到与我的代码中的“:src”有关。如果我在其中硬编码 URL，则视频加载正常，但这应该是每个用户的唯一属性。一个名为“avatar”的视频头像，其中包含视频的 URL。

只要我让用户从他们自己的文件加载视频，“:src”属性就可以正常工作。但是，在文件保存并转换为 URL 后，它将不再在装载时加载。

<template v-if="this.type == 'image'">
    <b-img key="image" id="avatarPhoto" v-bind="profile" :src="avatar" class="avatarPhoto"></b-img>
</template>
<template v-else>
    <video playsinline autoplay loop muted key="video" id="avatarVideo" v-bind="profile" class="avatarVideo">
        <!-- the line causing the error is below -->
        <source id="videoSrc" :src="avatar">
    </video>
</template>

<!-- this is how it renders on load with a URL for the prop -->

<video playsinline="" autoplay="autoplay" loop="loop" muted="muted" id="avatarVideo" class="avatarVideo">
     <source id="videoSrc" src="http://remoteserver.com/storage/avatar/profile/1558476637.mp4">
</video>

<!-- this is how it looks when rendered from a file load which works fine but this does not happen on load -->

<video playsinline="" autoplay="autoplay" loop="loop" muted="muted" type="video" id="avatarVideo" width="281.25" height="auto" class="avatarVideo">
     <source id="videoSrc" src="data:video/quicktime;base64,blahblahblah">
</video>

async created() {
    await this.$axios.get("profile")
        .then((response) => {
            this.form.fill(response.data.data)
            this.type = this.form.a_type.split('/').shift()
            this.avatar = response.data.data.avatar

            if (this.type === 'video'){
                this.getVideoDimensions()
                .then((dimensions) => {
                    this.form.a_dimensions = dimensions
                    this.handleResize(dimensions)
                })
                .catch((e) =>{
                    this.toast('error',e.message)
                })
            }
        })
        .catch((error) => {
            if (error.response){
                console.log(error.response.data)
                this.toast('error', error.response.data.data[0])
            }
        })
    if (process.client){
        window.addEventListener('resize',this.handleResize)
    }
}

这是@Taro 请求的 axios 响应示例

{
   "success":true,
   "data":{
      "id":1,
      "name":"xxx",
      "email":"xxx@xxx.com",
      "email_verified_at":null,
      "phone":null,
      "bio":null,
      "avatar":"http:\/\/xxx.xxx.xxx.xxx\/storage\/avatar\/profile\/1558476637.mp4",
      "a_ext":"mp4",
      "a_type":"video\/mp4",
      "a_dimensions":"height: 360 , width: 480",
      "background":"http:\/\/xxx.xxx.xxx.xxx\/img\/background.jpg",
      "b_ext":"jpg",
      "b_type":"image",
      "b_dimensions":null,
      "parent_id":null,
      "stripe_id":null,
      "card_brand":null,
      "card_last_four":null,
      "trial_ends_at":null,
      "created_at":"2019-05-21 20:52:31",
      "updated_at":"2019-05-21 22:10:37",
      "roles":[
         {
            "id":1,
            "created_at":"2019-05-21 20:52:31",
            "updated_at":"2019-05-21 20:52:31",
            "name":"Admin",
            "pivot":{
               "user_id":1,
               "role_id":1,
               "id":1
            }
         }
      ]
   },
   "message":"Authenticated"
}

它不会导致实际错误，但是当我检查视频 readyState 时，它​​的值为 0。没有关于媒体资源的信息。

我希望视频能够使用返回的 URL 加载，但事实并非如此。我该如何解决这个问题？

***更新

data() {
    return {
        errors:{},
        profile: {},
        avatar: 'http://xxx.xxx.xxx.xxx/storage/avatar/profile/1558476637.mp4',
        type:'',
        form: this.$vform({
            id: '',
            name: '',
            email: '',
            password: '',
            role: '',
            bio: '',
            avatar: '',
            a_ext: '',
            a_type:'',
            a_dimensions: {},
            background: '',
            b_ext: '',
            b_type:'',
            b_dimensions: {},
        })
    }
}

经过进一步测试，我怀疑我的头像属性设置得不够快，无法加载视频元素。如果我将 URL 硬编码到 avatar 属性中，则视频加载正常，所以我认为这段代码大部分都很好。

我尝试在 beforeCreate() 期间执行 axios 请求，与 created() 相对应。但是，这不起作用。我会继续测试。

这实际上代表了我在 Nuxt 中的视频元素也遇到的另一个问题。在 Nuxt 中，我无法动态更改视频元素源并重新加载视频元素。例如，当我让用户选择要上传的视频时，它会很好地加载视频文件。但是，如果用户认为这不是他们想要的视频并尝试选择另一个。我想不出用新视频文件重新加载视频元素的方法。

如果用户选择了图像，但是我的模板代码会从 DOM 中删除视频元素并插入图像元素。这会重置视频元素，如果他们想要不同的视频，则允许用户加载新视频。但是用户不能连续选择两个不同的视频并使其正常加载。

我不确定在处理一般视频元素或使用 Nuxt 或 JS 时是否缺少某些东西。

Answer 1

我通过在模板代码中排除初始视频源元素来修复它，并在我的 created() 方法中编辑以下代码以插入动态创建的源元素。

if (this.type === 'video'){
    // new code that fixing video initial loading
    var video = document.getElementById('avatarVideo')
    var src = document.createElement('source')
    src.setAttribute('src',this.avatar)
    video.appendChild(src)

    this.getVideoDimensions()
    .then((dimensions) => {
        this.form.a_dimensions = dimensions
        this.handleResize(dimensions)
    })
    .catch((e) =>{
        this.toast('error',e.message)
    })
}

我还修复了我的其他视频问题，方法是使用相同的方法来加载并发视频，方法是删除旧的源元素并重新插入新创建的源元素并使用额外的 video.load() 和 video.play() 函数一旦插入了新的源元素。