lucaspulliese / vue-cool-lightbox

Vue.js lightbox inspired by fancybox.
https://vue-cool-lightbox.lucaspulliese.com
341 stars 54 forks source link

Video URL that does not have an extension is not working #67

Closed pisethx closed 3 years ago

pisethx commented 3 years ago

In my case, the server would send a url that looks something like https://example.com/v1/media/abcdef?query=123. I dug into the source code and found a function called getVideoUrl where it return false for url that isnt youtube,video, or end with some extension.

I did specify the mediaType to 'video', therefore, it should just return the url instead of false as a fallback. Thank you.

lucaspulliese commented 3 years ago

Hello @rancou!

Yes, you are right, I will try to fix it as soon as I can.

lucaspulliese commented 3 years ago

Hello again @rancou!

Update the component to version 2.7.0, for your case you have to set the item object like this:

items: [
        {
          src: 'https://example.com/v1/media/abcdef?query=123',
          mediaType: "webVideo",
          ext: 'webm',
        }
],

If you don't set the key "ext" the extension of the video for the tag will be "mp4".

Let me know if everything works fine for you.

lucaspulliese commented 3 years ago

Closed since no response. Feel free to open the issue again if you want.

BoleLee commented 2 years ago

Hello again @rancou!

Update the component to version 2.7.0, for your case you have to set the item object like this:

items: [
        {
          src: 'https://example.com/v1/media/abcdef?query=123',
          mediaType: "webVideo",
          ext: 'webm',
        }
],

If you don't set the key "ext" the extension of the video for the tag will be "mp4".

Let me know if everything works fine for you.

I have the similar case, the video url is like: https://cdn.example.com/pictures/files/yyyy-mm-dd/abcdef. I'm using the version 2.7.4, and set the item like this:

items: [
    {
            thumb: 'https://cdn.example.com/pictures/files/yyyy-mm-dd/hijklmn,
            src: 'https://cdn.example.com/pictures/files/yyyy-mm-dd/abcdef',
            mediaType: 'webVideo',
            ext: 'webm'  // or 'mp4'
    }
]

when I add the mediaType: 'webVideo', it can add the video container, however, the video source still cannot be get. What else should I do? @lucaspulliese

BoleLee commented 2 years ago

image image

Why the video src is still depend on extension but not the item attribute "ext", or just return src

BoleLee commented 2 years ago

I change the setting to this:

items: [
    {
            thumb: 'https://cdn.example.com/pictures/files/yyyy-mm-dd/hijklmn,
            src: 'https://cdn.example.com/pictures/files/yyyy-mm-dd/abcdef',
            mediaType: 'iframe'
    }
]

so it render the video source in an iframe.