Code Monkey home page Code Monkey logo

jsvideourlparser's Introduction

A javascript parser to extract information like provider, id, channel, start time from media urls.

Supported providers

Building Locally

npm install
npm run lint
npm run test
npm run build

npm

npm install js-video-url-parser

bower

bower install js-video-url-parser

Usage

ES2015+ / Webpack

// All plugins
import urlParser from "js-video-url-parser";

// Choose individual plugins
import urlParser from "js-video-url-parser/lib/base";
import "js-video-url-parser/lib/provider/canalplus";
import "js-video-url-parser/lib/provider/coub";
import "js-video-url-parser/lib/provider/dailymotion";
import "js-video-url-parser/lib/provider/twitch";
import "js-video-url-parser/lib/provider/vimeo";
import "js-video-url-parser/lib/provider/wistia";
import "js-video-url-parser/lib/provider/youku";
import "js-video-url-parser/lib/provider/youtube";
import "js-video-url-parser/lib/provider/teachertube";
import "js-video-url-parser/lib/provider/ted";
import "js-video-url-parser/lib/provider/tiktok";
import "js-video-url-parser/lib/provider/loom";
import "js-video-url-parser/lib/provider/facebook";
import "js-video-url-parser/lib/provider/allocine";

Parsing

Parsing a url will return a videoInfo object with all the information

> urlParser.parse('http://www.youtube.com/watch?v=HRb7B9fPhfA')
{
  mediaType: 'video',
  id: 'HRb7B9fPhfA',
  provider: 'youtube'
}

> urlParser.parse('https://vimeo.com/97276391')
{
  mediaType: 'video',
  id: '97276391',
  provider: 'vimeo'
}

Any url parameters expect for ids will be saved in the params object. Some providers have special parameters for example the start parameter which dictates at how many seconds the video starts. Special parameters can be found in the different descriptions for the providers.

> urlParser.parse('https://www.youtube.com/watch?v=6xLcSTDeB7A&index=25&list=PL46F0A159EC02DF82&t=1m40')
{
  provider: 'youtube',
  id: 'yQaAGmHNn9s',
  list: 'PL46F0A159EC02DF82',
  mediaType: 'video',
  params: {
    start: 100,
    index: '25'
  }
}

Parsing an incorrect url or trying to create one with an invalid object will return undefined

> urlParser.parse('https://www.youuutube.com/watch?v=97276391')
> urlParser.create({ videoInfo: { provider: 'youtube' })
undefined

Url Creation

The videoInfo objects can be turned back into urls with the .create function. The required parameter for this is the videoInfo object itself. Optional ones are the format of the url and the url parameters that should be added. Each provider has it's own default format.

> urlParser.create({
    videoInfo: {
      provider: 'youtube',
      id: 'HRb7B9fPhfA',
      mediaType: 'video'
    },
    format: 'long',
    params: {
      foo: 'bar'
    }
  })
'https://www.youtube.com/watch?foo=bar&v=HRb7B9fPhfA'

Parsing and creating can also be chained together to clean up an url for example. If you still want to reuse the generated parameters object you can use the keyword 'internal' as params.

> urlParser.create({
  videoInfo: urlParser.parse('https://youtube.com/watch?foo=bar&v=HRb7B9fPhfA')
})
'https://www.youtube.com/watch?v=HRb7B9fPhfA'

> urlParser.create({
  videoInfo: urlParser.parse('https://youtube.com/watch?foo=bar&v=HRb7B9fPhfA'),
  params: 'internal'
})
'https://www.youtube.com/watch?foo=bar&v=HRb7B9fPhfA'

Typescript

// All plugins
import urlParser, { YouTubeParseResult } from 'js-video-url-parser';
const info = urlParser.parse('http://www.youtube.com/watch?v=HRb7B9fPhfA') as YouTubeParseResult;

// Choose individual plugins
import urlParser from 'js-video-url-parser/lib/base';
import { YouTubeParseResult } from 'js-video-url-parser/lib/provider/youtube';

const info = urlParser.parse('http://www.youtube.com/watch?v=HRb7B9fPhfA') as YouTubeParseResult;

// Parse results can be undefined
const id = info?.id;

Adding a provider

Add a new file in the lib/provider/ directory with the template found here and also add it to index.js.
Add some tests in lib/provider/ with the template found here.

Run npm run test to create the parser and test your plugin.

Provider information and examples

License

MIT

jsvideourlparser's People

Contributors

brianlukoff avatar claabs avatar dependabot[bot] avatar dmalan avatar gonzalo-massa avatar henckellbach avatar jbaudanza avatar lukescott avatar malizhev avatar maxgfr avatar nathanbnm avatar oskarrough avatar picbenoit avatar qd-qd avatar renatoaug avatar saibayadon avatar takase1121 avatar zod- avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

jsvideourlparser's Issues

Twitch Parser Issue

Hi Zod-,

I just noticed that for twitch links,

https://www.twitch.tv/<username>/clip/<clip name>

is returning a mediaType "stream" instead of "clip".

TS: Error in type declaration

Hi I have an issue when using the package with typescript :

node_modules/js-video-url-parser/lib/index.d.ts:9:15 - error TS2307: Cannot find module './provider/template' or its corresponding type declarations.

It looks like the template files are not include in the lib folder of npm package :

├── base.d.ts
├── base.js
├── index.d.ts
├── index.js
├── provider
│   ├── base-provider.d.ts
│   ├── canalplus.d.ts
│   ├── canalplus.js
│   ├── coub.d.ts
│   ├── coub.js
│   ├── dailymotion.d.ts
│   ├── dailymotion.js
│   ├── soundcloud.d.ts
│   ├── soundcloud.js
│   ├── teachertube.d.ts
│   ├── teachertube.js
│   ├── ted.d.ts
│   ├── ted.js
│   ├── tiktok.d.ts
│   ├── tiktok.js
│   ├── twitch.d.ts
│   ├── twitch.js
│   ├── vimeo.d.ts
│   ├── vimeo.js
│   ├── wistia.d.ts
│   ├── wistia.js
│   ├── youku.d.ts
│   ├── youku.js
│   ├── youtube.d.ts
│   └── youtube.js
├── testUrls.js
├── urlParser.d.ts
├── urlParser.js
└── util.js

(:point_up: node_modules/js-video-url-parser/lib)

Twitch Clips not supported

Hey :) ! I'm using your plugin on my fresh project, and I noticed they were no support for parsing Twitch Clips (new twitch feature for 30 sec video).
A twitch clip url looks like this : https://clips.twitch.tv/pokelawls/VictoriousBearFailFish .

For now the parser considers this like a "stream".

I tried to add Twitch Clip support to your project so I could make a pull request but I'm just so terrible with RegExes, I couldn't get something working :( .

If I make all the other stuff could you give me a hand for the regex part ? We just need to detect if there is "clips." in front of twitch.tv , and then just get this string "pokelawls/VictoriousBearFailFish".

Embed format for url creation and options handling

What about an embed format:

urlParser.create({
    videoInfo: urlParser.parse('http://www.youtube.com/watch?feature=player_embedded&v=HRb7B9fPhfA'),
    format: 'embed'
  });

That outputs:

//www.youtube.com/embed/HRb7B9fPhfA

What about options handling:

urlParser.create({
    videoInfo: urlParser.parse('http://www.youtube.com/watch?feature=player_embedded&v=HRb7B9fPhfA'),
    format: 'embed',
    options: {
               enablejsapi: 1,
               autoplay: 1,
               loop: 1,
               rel: 0,
               showinfo: 0,
               vq: 'large'
    }
  });

That outputs:

//www.youtube.com/embed/HRb7B9fPhfA?enablejsapi=1&autoplay=1&loop=1&playlist=HRb7B9fPhfA&rel=0&showinfo=0&vq=large

Here comes some inspiration from the "project" I'm currently working on, it is using your great lib:

project.getVideoUrl = function (url, options) {
        var videoInfo = '',
            videoUrl = '',
            i;

        if (typeof win.urlParser === 'object') {
            videoInfo = win.urlParser.parse(url);

            /* handle video */

            if (typeof videoInfo === 'object' && typeof videoInfo.id === 'string') {

                /* dailymotion */

                if (videoInfo.provider === 'dailymotion') {
                    videoUrl = '//www.dailymotion.com/embed/video/' + videoInfo.id;
                }

                /* vimeo */

                if (videoInfo.provider === 'vimeo') {
                    videoUrl = '//player.vimeo.com/video/' + videoInfo.id;
                }

                /* youtube */

                if (videoInfo.provider === 'youtube') {
                    videoUrl = '//www.youtube.com/embed/' + videoInfo.id;
                }
            } else {
                return false;
            }

            /* process options */

            if (typeof options === 'object' && typeof options[videoInfo.provider] === 'object') {
                for (i in options[videoInfo.provider]) {
                    if (Object.keys(options[videoInfo.provider])[0] === i) {
                        videoUrl += '/?';
                    } else {
                        videoUrl += '&';
                    }
                    videoUrl += i + '=' + options[videoInfo.provider][i];

                    /* youtube hack */

                    if (videoInfo.provider === 'youtube' && i === 'loop' && options[videoInfo.provider]['loop'] === 1) {
                        videoUrl += '&playlist=' + videoInfo.id;
                    }
                }
            }
            return videoUrl;
        }
        return false;
};

My unit testing data:

/* input */
https://www.dailymotion.com/video/xxxxxx
https://www.vimeo.com/123456789
https://www.youtube.com/watch/?v=123456789
https://www.dailymotion.com
https://www.vimeo.com
https://www.youtube.com

/* output */
//www.dailymotion.com/embed/video/xxxxxx/?autoplay=1&loop=1
//player.vimeo.com/video/123456789/?autoplay=1&loop=1
//www.youtube.com/embed/123456789/?autoplay=1&loop=1&playlist=123456789
false,
false,
false
  1. I'm using protocol relative urls for the embed urls
  2. youtube loop options needs a hack -> need for &playlist=video id

Let me know what I think :-)

UglifyJS error during webpack traspilation

First thing's first, I am not a javascript pro, nor am I a webpack wizard, so bear with me while I try to convey my issue.

When running webpack -p for my project, I'm getting an error:

ERROR  Failed to compile with 1 errors

notification.js from UglifyJs
Name expected [notification.js:400,6]

After some research it appears this is due to webpack trying to run the ES6 code from js-video-url-parser's 'lib' directory through UglifyJS. So my workaround to get this package to work is to add 'js-video-url-parser' to the list of excludes in webpack.config.js.

Upon even more research, it appears that the 'js-video-url-parser' will transpile/uglify as designed if webpack uses the pre-transpiled version located in the 'dist' directory, but webpack will not use this version unless the 'modules' field in package.json is set to 'dist/jsVideoUrlParser.js'.

So I guess my proposal is to add a field in package.json "module": "dist/jsVideoUrlParser.js".

If anyone else has any further input to this issue please tell me I'm not crazy.

[Feature Req] Vidyard support?

Hi this is the exact library I needed to find I want to be sure that the link user inserts is not something broken.

Do you think you could introduce vidyard support?

YouTube /c/ and /user/ aliases are treated interchangeably but might point to different accounts

Currently, the /c/ and /user/ URLs are both treated as interchangeable aliases within the YouTube parser, but this might not be true for all URLs.

Example:
https://www.youtube.com/c/Defender833/
https://www.youtube.com/user/Defender833/

Both result in { name: 'Defender833', mediaType: 'channel', provider: 'youtube' } but they are actually different channels: when /c/ is used, the "Defender833" name refers to the customUrl parameter of the YouTube API (hence being found by looking for a generic search param) while with /user/ you are actually looking at the user name, which can be targeted by a different call within the YouTube API.

I was not aware of this until now but apparently, /user used to be the unique ID 2005-2013, at which point the userIDs (/channel/) got introduced. It was possible for a brief period to still claim usernames, but soon after, /c got implemented via Google+.
As a consequence to this, while /c/ often is the same as /user/ for many folks, it can be something else.

It would be useful if there was a way to discern whether the channel name was of "user" or "c" type from the .parse function output.

Youtube URL format missing.

Hi!
Awesome library!

I've noted that the youtube Android app gives a slight diferente URL that is not supported by this library: http://www.youtube.com/shared?ci=E14kBrDEvYo

For example urlParser.parse("http://www.youtube.com/shared?ci=E14kBrDEvYo"); returns undefined

Steps to reproduce:

  1. Open the Youtube App on your phone. (I've tested on Androdi 4.4 with latest youtube app installed)
  2. Click the "share arrow"
  3. Make sure "Share as [YOUR NAME]" is checked (It was checked by default)
  4. Choose another app. (I've chosen "Clipboard" and pasted somewhere else to see the link)

Thanks!

Update Twitch formats

There are a few additional url formats for videos. I should probably also just combine the idPrefix with the id like on the embedded video urls https://player.twitch.tv/?video=v75292411

Please add Soundcloud

Please add soundcloud support, though it's not video site but relevant and will be helpful.

Please add support for Vimeo hash on URLs

Hi

There are some issues with this format of Vimeo URLs:

vimeo.com/{video_id}/{hash}
player.vimeo.com/{video_id}?h={hash}

The hash is needed in order to display the video, otherwise it'll show an error (404 most of the time).

I've made a pull request (#90) that fixes this problem. I've tried to follow the code style of the plugins, but had to make some exceptions:

  • parseUrl only searches for the video ID, so I've created a parseHash function, that is called after the result object creation.
  • I've added a new argument (type) to createUrl in order to tell if it's being created in "long" or "embed" mode, because that makes a difference on the way the hash is included (as part of the path for long and has a param for embed).

Please let me know if you have any questions about this.

Thank you,
Gonzalo

Twitch mobile clip url not parsing correctly

Attempting to generate a twitch embed url from mobile urls as seen below are not generating correct embed url.

The following:

https://m.twitch.tv/clip/ResilientBeautifulDillOSkomodo

results in a parsedResult of

channel: "clip"
mediaType: "stream"
provider: "twitch"

Ignore this issue if mobile routes are ignored intentionally.

Improve parameter handling

Thank you for providing the params options... it works as it should be but fails / runs into busy waiting (infinity loop) when I passed invalid / undefined params. In my project it even stops the whole Javascript to process without returning na error or warning.

  1. Simplify the whole parameter handling and remove the extra magic that ruins the performance
    while (tokens = re.exec(qs)) {
     params[decodeURIComponent(tokens[1])] = decodeURIComponent(tokens[2]);
    }
    
  2. If you want to keep it, set the tokens var outside the while
  3. Prevent the processing of emtpy or invalid params
  4. Unit testing

Prototypes

Create video info objects so that the parser doesn't has to be used anymore for creating urls (can still use it for backwards compatibility).

VideoInfo.toUrl({format: "format", params: {}})

Also create prototypes for the plugins

Problem parsing Twitch VOD/Clips urls

If you try to parse a channel/stream url the parser works fine. But when you put in a VOD url or Clips url the parser still thinks its a stream url.

For e.g. :
https://www.twitch.tv/moonmoon_ow = { channel: moonmoon_ow, mediatype: stream}

https://www.twitch.tv/videos/164368461 = {channel: videos, mediatype: stream}

https://clips.twitch.tv/EndearingLuckyElkHeyGirl = {channel: EndearingLuckyElkHeyGirl , mediatype: stream}

So I'm guessing the code just defines the first parameter after the domain name as channel and everything as a stream mediatype

Handle non existing Youtube imageQuality-ies

Hi,

This is a not bug in this library, but a question.

I want to get the URL of a Youtube image at the highest resolution available:

const url = urlParser.create({
            videoInfo: parse,
            params: {
              imageQuality: 'maxresdefault'
            },
            format: 'shortImage'
          });

Sometimes Youtube videos do not provide maxresdefault images and the URL return a 404. I need to test that a maxresdefault image exists and if not, get the hqdefault quality. But I cannot test the existence of the Youtube URL (with fetch or axios) because of CORS restrictions.

How I can test that a CORS URL is not a 404 ?

thanks

Add TeacherTube?

Thanks for this great utility! I've been trying to add TeacherTube into the library, but my abilities with regular expressions are near zero. I think it would be pretty straightforward to add for someone who has done it before. Wondering if you might consider adding it?

Add DailyMotion image format

I tried to push this update to the repo, but I don't have permissions for a pull request.

Proposed changes to file:
jsVideoUrlParser/lib/provider/dailymotion.js

...
this.formats = {
    short: this.createShortUrl,
    long: this.createLongUrl,
    embed: this.createEmbedUrl,
    image: this.createImageUrl
  };
...
Dailymotion.prototype.createImageUrl = function(vi) {
  return this.createUrl('//www.dailymotion.com/thumbnail/video/', vi);
};

Add grunt support

Please add grunt support:

Utilize the uglify task for your dist:
(you better rename the folder /release to /dist to meet global standards)

grunt dist

What about a custom dist:

grunt dist -dailymotion -youtube

JSHint or JSCS:

grunt jshint
grunt jscs

Typescript Definition?

Hey, thanks for this lib!

Is there any way we can have typescript typings for this package? There doesn't seem to be any definitions either locally or on DefinitelyTyped.

ReferenceError: window is not defined

Install via npm, open node REPL and got this when trying to require the lib:

ReferenceError: window is not defined
    at Object.<anonymous> (/Volumes/Data/Users/.../node_modules/js-video-url-parser/dist/jsVideoUrlParser.js:775:4)
    at Module._compile (module.js:410:26)
    at Object.Module._extensions..js (module.js:417:10)
    at Module.load (module.js:344:32)
    at Function.Module._load (module.js:301:12)
    at Module.require (module.js:354:17)
    at require (internal/module.js:12:17)
    at repl:1:17
    at REPLServer.defaultEval (repl.js:252:27)
    at bound (domain.js:287:14)

Same error when I use it in my node project.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.