Star Wars Roleplay: Chaos

Register a free account today to become a member! Once signed in, you'll be able to participate on this site by adding your own topics and posts, as well as connect with other members through your own private inbox!

HTML5 Video Support

I believe this site should have full HTML5 video support.

Benefits:

With full HTM5 video support on the site, peole can upload an mp4/webm/ogg of their video to Dropbox and easily hotlink it much in the same way that people can use Photoshop and Imgur. Imgur webms could be hotlinked on SWRP (like this one), allowing for browsers of Reddit forums that utilize webms to easily share this content on the board. Users can then use these videos as signatures, show and tells, instructional videos, and many more. Staff can also use them for advertising events or whatever else feels necessary. HTML5 videos pose no security risk for users, compared to Flash which is enabled by this website in a very limited manner.

Problem:

Currently, this site has support for three different video formats.

First is Youtube, which is fine for a lot of people. Youtube is the #1 source of public videos on the internet, so it makes sense for the site to support them. However, they do not have autoplay or custom height/width support. Youtube videos can also contain annoying ads without an adblocker extension downloaded to the user's browser. Second is Vimeo, which has similar limitations to videos.

Third is gfycat. However, the site itself is under beta and liable to drastically change in the future. Its videos are always soundless. Its videos are also limited by length to 15 seconds. The current way the site implements gfycat videos does not have them automatically switch to a gif when posted. SWRP also does not support fat gfycat videos, which are those between 1 and 3 MB, while having fully support for zippy gfycats (< 1 MB) and giant gfycats (> 3 MB). This presents a weird gap where a gfycat between 1 and 3 MB cannot be used on this site while gfycats below or above that range can. Gfycat also has issues when converting non gif/mp4/webm files, which are not the only video formats available.

With these options, this limits what board users can do compared to what HTML5 video can provide.

Implementation:

Implementing full HTML5 video support is simple for this site. HTML5 videos use the <video> and <source> HTML tags along with some parameters available for options. Essentially, a custom BB code is all that's necessary that will take the BBcode tag and convert it to HTML, such as:

<video width="320" height="240" autoplay loop muted>
<source src="movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
Posting the above will play movie, an mp4. It will automatically start when the page loads, automatically loop, and it will be muted. Viewers will have to prompt it to pause or play sound. If the viewer's browser does not support HTML5, then it will display the alternative message below <source>. The video will also be shown as in a 320px by 240px frame.

Parameters that would be necessary are:
Source - the direct URL link to the video

Parameters that are beneficial yet not necessary:
Width & Height - The video will automatically render at the source width and height if these parameters are not specified, yet these parameters can be used in order for the user to reduce the size of the video as they wish.

In order to actually create the custom BBcode, an Administrator is necessary. If I recall correctly, these are the steps:
  • Access Admin Control Panel
  • Go to the Look & Feel Tab
  • Go to Post Content, then to BBcode Management
  • Click Add BBcode
There will be a name field, which if a button is not created for this BBcode tag that will be what it's named within the Special BB Code list. A description can be added and this will be displayed in the Special BB Code list. This description can also include specific instructions if necessary.

A tag will be necessary. This is what is in between the brackets ([ ]) whenever the BBcode is used.

The html code for the BBcode then needs to be created, which can essentially be this:

<video autoplay loop muted>
<source src="{content}" type="video/mp4">
<source src="{content}" type="video/ogg">
<source src="{content}" type="video/webm">
</video>
This goes in BBcode replacement. It gives the bare bones necessary to make the HTML5 video work on the site. There is the opportunity to edit one other parameter with the Option parameter that custom BBcode on IPB allows.

Two immediate options I see in how to implement the Option parameter are:

<video width={option} autoplay loop muted>
<source src="{content}" type="video/mp4">
<source src="{content}" type="video/ogg">
<source src="{content}" type="video/webm">
</video>
Code:
<video autoplay loop muted>
<source src="{content}" type="video/mp4">
<source src="{content}" type="video/ogg">
<source src="{content}" type="video/webm">
{option}
</video>
The top allows the user to set the width. The video scales proportionally if just the width or height are set, but not the other. The bottom example allows for alternative text to be displayed in the even that a non HTML5 compatible browser is used. In that case, the person posting the video can give an alternative image.

Yet once the BBcode replacement is set, all other parameters in the Add BBcode page need to be changed to reflect how this BBcode will be implemented (group permissions, for one). A BBcode button can be uploaded to the site. Finally, click add BBcode at the bottom.

Once that is done, users only need to push the button or type in their post:

[video={option}]{content}[/video]
Of course, for more intricate and nuanced implementation of HTML5 on the board, a PHP file may be required. Yet for the bare bones being implemented now, it only requires one Administrator to fill out a form.
 
poster would actually be a good parameter for Option, after looking into this further. When using gfycat on SWRP, poster is a parameter used to show a picture in the event that none of the urls/videos work. This parameter is for the <video> tag, and thus can be used for any HTML5 video.

So the BBcode replacement would look like:

<video autoplay loop muted poster="{option}">
<source src="{content}" type="video/mp4">
<source src="{content}" type="video/ogg">
<source src="{content}" type="video/webm">
</video>
And this would result in:
  • Displaying the video if it is an mp4, ogg, or webm
  • Otherwise, it displays a still picture as linked in poster.
 

Users who are viewing this thread

Top Bottom