Question

安装组件后，我的视频无法加载

我已将问题缩小为与代码中的“：src”有关。如果我在其中硬编码URL，则视频会很好地加载，但是这应该是每个用户的唯一属性。名为“头像”的视频头像，其中包含视频的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（）期间执行与create（）相适应的axios请求。但是，这不起作用。我将继续测试。

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

如果用户选择图像，但是我的模板代码从DOM中删除了video元素并插入了image元素。这将重置视频元素，允许用户在需要其他视频时加载新视频。但是用户不能连续选择两个不同的视频并正确加载。

我不确定在使用视频元素或使用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)
    })
}

我还通过删除旧的source元素并重新插入新创建的source元素并使用其他video.load（）和video.play（）函数，使用相同的方法来加载并发视频，从而解决了其他视频问题一旦插入了新的source元素。

Nuxt视频无法从URL

1 个答案: