cdayjr / video-tag

A video tag parser to make it easy to create video embed bbcodes for forum software.

Video Tag

JavaScript for making video bbcodes and similar things as simple as they can get.

Supports

• YouTube videos (with timestamps)
• YouTube playlists
  • YouTube playlists that start from a specific video (with timestamps)
  • YouTube user uploads list
  • YouTube playlists that are just comma separated video IDs
• Vimeo videos (with timestamps)
• Vimeo albums
• Twitch videos (VODs) (with timestamps)
• Twitch channels
• Twitch collections
• Twitch clips
• Mixer channels
• Mixer videos (VODs)

Usage

See the github wiki for platform-specific installation instructions.

Here's a simple installation guide:

Run the build script (pnpm run build) and upload the files from the dist folder or the contents of a release zip file and include video-tag.js and video-tag.css with a <script> and <link> tag, respectively.

Once the code has been deployed to your site, it'll look for div tags with the video-tag class. If the tag has a data-source attribute with a URL in it. An example would be:

<div
  class="video-tag"
  data-source="https://www.youtube.com/watch?v=g4Hbz2jLxvQ"
></div>

This is the bare minimum, of course, so a fallback link to the source is recommended like so:

<div
  class="video-tag"
  data-source="https://www.youtube.com/watch?v=g4Hbz2jLxvQ"
>
  <a
    class="video-tag-fallback"
    href="https://www.youtube.com/watch?v=58OabCRCx_Q"
    >https://www.youtube.com/watch?v=58OabCRCx_Q</a
  >
</div>

For Jcink Forum Hosting, a 1 paramater video tag with the following content:

<div class="video-tag" data-source="(PARAM1)">
  <a class="video-tag-fallback" href="(PARAM1)">(PARAM1)</a>
</div>

should be sufficient if you have the JavaScript and CSS loaded in your board wrappers. It's recommend you style the video-tag class in your own stylesheet to how you'd like, a sample is:

.video-tag {
  margin: 1em 1em 1em 0;
  max-width: 100%;
}

Available functions

You can also call bits of the JavaScript from a third party script. We export the following functions:

• getVideoTags - Returns a HTMLDivElement NodeList containing all HTML tags that match the format that haven't been parsed.
• parseVideoTag - Takes an HTMLDivElement that matches the format and parses it through our code, removing the contents and placing an iframe or error message in there.
• parseVideoTags - Gets all the tags via getVideoTags and parses each of them with parseVideoTag.
• urlToEmbedUrl - Take a video URL and get just the embed URL for it.

Notes

• YouTube links that include both a playlist and video ID will embed the video and not the playlist. YouTube playlist embedding does not support starting from a specific video and it's probably more likely a user wants to embed the video they have a link to and not the playlist it belongs to.
• Twitch embeds don't work on Internet Explorer 11. This seems to be an issue on their end, let them know since they appareltny say they should support Internet Explorer 11.
• ID-only sources only work for video IDs and Twitch channels- everything else will require a full URL as the source parameter even with the provider param set.
  • For Mixer, only channel IDs work. This is because Mixer requires the correct channel to embed a VOD.

Built With

• Babel
• Bootstrap responsive 16:9 embed CSS
• PostCSS
• SCSS
• TypeScript
• eslint
• jest - Tests
• parcel - The bundler that brings it all together
• pnpm - JavaScript package management
• prettier
• stylelint

Contributing

Please see CONTRIBUTING.md for information on how to contribute, as well as details getting this up and running for development.

Versioning

We use SemVer for versioning. For the versions available, see the tags on this repository.

Authors

• Chad Wade Day, Jr. - Initial work - @cdayjr

See also the list of contributors who participated in this project.

License

This project is licensed under the MIT License - see the LICENSE.md file for details

Acknowledgments

• Many video bbcode tags I've seen in the past inspiring me to take my own swing at it.

video-tag's Issues

Add hitbox provider

Hitbox is a streaming service like Twitch. Its embed documentation is here: https://hitbox.desk.com/customer/en/portal/articles/1354469-how-can-i-embed-a-stream-and-streamchat-on-another-website-

Improve YouTube support

https://developers.google.com/youtube/player_parameters#Selecting_Content_to_Play

Looks like YouTube embeds can be a lot better; we can support embedding channels as well as better support for playlists (starting from a specific video). Will have to test these out and see how they work out for us.

Create automated tests

Really want to have automated tests working with this so it's easy to make sure everything works as expected.

Update twitch provider

The demo doesn't seem to work anymore for the twitch tags, it may be a source video issue, but if not, the embed tags should be updated.

Implement TSDoc

It'd be a good idea to have everything thoroughly documented with a standard. TSDoc seems well suited for the task here.

Implement Twitch clip embedding

Looks like there's another kind of video that can be embedded from Twitch- clips. Guessing it's a segment from a VOD or stream? Either way, I should support it.

https://dev.twitch.tv/docs/embed/video-and-clips/

Implement Playlist embedding

Twitch, Vimeo, and YouTube have playlists that can be embedded, I should get those working.

• https://dev.twitch.tv/docs/embed/video-and-clips/
• https://vimeo.zendesk.com/hc/en-us/articles/115007991707-Embeddable-Playlists
• https://support.google.com/youtube/answer/171780?hl=en

Add archive.org provider

Looks like one can embed archive.org videos.

Here's the documentation for that: https://archive.org/help/video.php

Re-work test.html

I'm planning on renaming this to demo.html as it's there to demonstrate the script. Then I want to split up each example so you're not loading a bunch of videos at once, as well as show the code used to generate it so people can easily see what makes what.

Add YouTube shorts / clips support

YouTube has at least these two new methods of videos now, so we should support them.

There may be other video types as well, so we should make sure we support as much as we can.

Add Mixer support

Mixer is essentially Microsoft's answer to Twitch; it's fairly popular and shouldn't be a problem to support.