Basic Video doesn't seem to work with source or sources prop?

[cdnrg-rt]

Describe the bug
Quasar 1.9.3 App 1.5.8 Extras 1.5.1
SSR Mode

added extension and added a basic video using the demo video.

<div id="q-app">
    <q-media-player
      type="video"
      source="http://www.peach.themazzone.com/durian/movies/sintel-2048-surround.mp4"
    />
</div>

Video element is on the page but no source is present. Video player is showing as well just black and loading.

Can see the source set in vue dev tools

it's strange as the demo page in the docs is working fine and seems to be SSR as well so It's not an HTML5 video issue. Using latest Chrome Browser. Any suggestions?

Just want to add there are no errors present in the console...

[hawkeye64]

@cdnrg-rt the source property does not add any html tags. Instead, it accesses the media element directly to inject into media element src attribute.

You can do the same thing in javascript by giving the QMediaPlayer element a ref (say mediaplayer.

Then you can do this:

this.$refs.mediaplayer.$media.src = 'http://www.peach.themazzone.com/durian/movies/sintel-2048-surround.mp4`

This is what is happening internally, but you can also try it manually.

Also, you should know, loading external videos like the one above means you have no control. They may limit the number of connected users or have blocks on certain countries, etc. You should try downloading the file and then point to your local server. The docs uses the external ones because the files are too big for Github without using LFS (which can cost $).

[cdnrg-rt]

Thanks @hawkeye64 !

I ended up making my own component but will keep that in mind for future projects :)

[fbrbovic]

I am encountering the exact same exact problem, what is the solution?

[cdnrg-rt]

@fbrbovic I was unable to find a solution. As I needed just a simple video on loop I made a very simple component:

<template>
  <video
    :autoplay="autoplay"
    :controls="controls"
    :height="height"
    :loop="loop"
    :muted="muted"
    :poster="poster"
    :width="width"
  >
    <source
      :src="source.src"
      :type="source.type"
      :key="`video-${index}`"
      v-for="(source, index) in sources"
    >
  </video>
</template>

[fbrbovic]

@cdnrg-rt thanks also found another one too which works pretty good too.
https://github.com/redxtech/vue-plyr#nuxt

I think you should probably re-open this ticket, there is definitely some issue with this player.

[hawkeye64]

@cdnrg-rt @fbrbovic
So, a little history. At work, we are using Plyr. So many issues, based on our needs. This is the reason QMediaPlayer was written. And, at work, we were using v.17 of Quasar. Recently, we switched to v1.x in the lastest branch. And Thursday and Friday I started the swap of Plyr to QMediaPlayer. Which was done easily enough, and also using the source property. So, I really don't understand the issue(s) you guys are/were having.

[fbrbovic]

@hawkeye64 Using the latest quasar SSR. In my case I was loading mpg video from another server and video would not play, there would be just loading icon and the whole player would be frozen. There were no errors of any kind. I tried multiple different video sources and the same issue.
I am sorry but I didn't have time to create a repo where the issue could be replicated, my original app is rather complicated.
Since then I have moved onto Plyr, but hey if this issue is resolved I would love to come back to QMediaPlayer.

[hawkeye64]

I can look into it and see if there is an SSR issue. Just need to build demo with -m ssr and make sure they all work as expected.

[hawkeye64]

@fbrbovic I built the demo with SSR and no issues. Personally, I don't understand what is causing the issue for others. It's be nice if someone hooks up the the error events (@abort, @error, and @networkState) and see if something is being reported. Possibly a cross-origin issue.

[fbrbovic]

@hawkeye64 K so I went back and re-added the player to the app I was having the problem with and I added events you mentioned and nothing, no event got triggered, no cors errors in browser console or any network errors or any errors of any kind, tried both Chrome and Firefox. Network logs show no connection being made to get the video file.

 <q-media-player
        type="video"
        background-color="black"
        :autoplay="true"
        source="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4"
        @abort="debug"
        @error="debug"
        @networkState="debug"
        @ready="debug"
        @loadstart="debug"
      >
      </q-media-player>

.
.
.

    debug(data) {
      console.log('input data', data);
    },

My product is using it inside the q-virtual-scroll so I thought maybe it's not compatible with it so I took it out and placed it outside of it and still the same result.

[hawkeye64]

@fbrbovic Here's a pen I did with same video and no issue. Feel free to fork and modify it so that it's closer to your set up. See if you can get it to break.

The pen has 2 video players. https://codepen.io/Hawkeye64/pen/ExjpZRE

The first one uses the sources property. This one writes out HTML between the video tag that is read in my the media element.

The second one uses the source property, which writes to the media element's src property as soon as the video element is created by the dom.

[hawkeye64]

@fbrbovic

In my case I was loading mpg video from another server and video would not play

I am wondering if you were running into CORS issues with this?

[fbrbovic]

@fbrbovic

In my case I was loading mpg video from another server and video would not play

I am wondering if you were running into CORS issues with this?

@hawkeye64 Yeah I thought it would be some kind of CORS errors, but there were no CORS errors or any errors reported by the browser, this was with chrome.