Nuxt видео не загружается при монтировании с URL - PullRequest
Новая
       3

Nuxt видео не загружается при монтировании с URL

0 голосов
/ 22 мая 2019

Мое видео не загружается, когда компонент монтируется

Я сузил проблему до того, чтобы иметь какое-то отношение к ": 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)
    }
}

Это пример ответа axios, запрошенного @ Taro 

{
   "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 в свойстве аватара, видео загружается нормально, поэтому я думаю, что этот код в основном хорош.

Я пытался выполнить запрос axios во время beforeCreate (), в отличие от create ().Однако это не работает.Я продолжу тестирование.

На самом деле это как бы еще одна проблема, связанная с элементами видео в Nuxt.В Nuxt я не могу динамически изменить источник видео элементов и перезагрузить видео элемент.Например, когда у меня есть пользователь, который выбирает видео для первоначальной загрузки, он прекрасно загружает видеофайл.Однако, если пользователь решает, что это не то видео, которое он хочет, и пытается выбрать другое.Я не могу придумать способ перезагрузить элемент видео с новым видеофайлом.

, если пользователь выбирает изображение, однако мой шаблонный код удаляет элемент видео из DOM и вставляет элемент изображения.Это сбрасывает элемент видео, позволяя пользователю загрузить новое видео, если они хотят другое.Но пользователь не может выбрать два разных видео подряд и правильно загрузить их.

Я не уверен, что мне чего-то не хватает при работе с элементами видео вообще или с Nuxt или JS.

1 Ответ

0 голосов
/ 22 мая 2019

Я исправил это, исключив исходный элемент видео источника в коде шаблона, и отредактировал следующий код в моем методе create (), чтобы вставить динамически созданный элемент источника. 

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 (). после вставки нового исходного элемента.

...