vb.org Archive - Youtube (etc.) in HTML5

vb.org Archive (https://vborg.vbsupport.ru/index.php)

- Modification Requests/Questions (Unpaid) (https://vborg.vbsupport.ru/forumdisplay.php?f=112)

- - Youtube (etc.) in HTML5 (https://vborg.vbsupport.ru/showthread.php?t=261336)

gopherhockey

04-02-2011 11:40 AM

Youtube (etc.) in HTML5

I would like to see someone do a modification that allows Youtube and other web videos to be displayed via HTML5.

The world is going mobile, and vBulletin is showing its age. Without getting into a huge argument, flash just doesn't cut it anymore (even on devices that can use it).

We are about to ditch vBulletin for a better social experience, but before we do I wanted to make one last attempt to get something relevant. Thought this was the place to fix the aging forum code.

BirdOPrey5

04-02-2011 02:33 PM

I'm pretty sure these are easy template edits in the template bbcode_video...

I imagine they'll be updated on new versions of vBulletin eventually, I'm pretty sure I saw info on upgrading the YouTube player on vbulletin.com already, probably somewhere here too if you search for it.

To update to YouTube HTML 5 in vbullrtin 4.x edit the template bbcode_video...
Save a copy first in case this doesn't work.

Find:

Code:

<vb:elseif condition="$provider == 'youtube'" />

<object class="restrain" type="application/x-shockwave-flash" width="640" height="385" data="http://www.youtube.com/v/{vb:raw code}">

        <param name="movie" value="http://www.youtube.com/v/{vb:raw code}" />

        <param name="wmode" value="transparent" />

        <!--[if IE 6]>

        <embed width="640" height="385" type="application/x-shockwave-flash" src="http://www.youtube.com/v/{vb:raw code}" />

        <![endif]--></object>

Replace with:

Code:

<vb:elseif condition="$provider == 'youtube'" />

<iframe title="YouTube video player" width="640" height="385" src="http://www.youtube.com/embed/{vb:raw code}" frameborder="0" allowfullscreen></iframe>

Save the template and you should be set.

Edit- Just tested, yes it works.

gopherhockey

05-08-2011 02:01 PM

Excellent, thanks! Finally we can be forward looking... it seems to use HTML5 when it can, otherwise reverts back to the old flash.

Anyone know of any other video types that can be modified to support HTML5 like this? I think youtube is used 99% of the time, but vimeo is used on occasion.

Looks like vimeo can work using this code:

Code:

<vb:elseif condition="$provider == 'vimeo'" />

<iframe src="http://player.vimeo.com/video/{vb:raw code}" width="640" height="385" frameborder="0"></iframe>

BirdOPrey5

05-08-2011 02:20 PM

For Vimeo in the same template find:

Code:

<vb:elseif condition="$provider == 'vimeo'" />

<object class="restrain" type="application/x-shockwave-flash" width="640" height="360" data="http://vimeo.com/moogaloop.swf?clip_id={vb:raw code}">

        <param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id={vb:raw code}" />

        <param name="wmode" value="transparent" />

        <!--[if IE 6]>

        <embed width="640" height="360" type="application/x-shockwave-flash" src="http://vimeo.com/moogaloop.swf?clip_id={vb:raw code}" />

        <![endif]--></object>

Replace with:

Code:

<vb:elseif condition="$provider == 'vimeo'" />

        <iframe src="http://player.vimeo.com/video/{vb:raw code}?title=0&amp;byline=0&amp;portrait=0" width="640" height="360" frameborder="0"></iframe>

Note while HTML5 is the future, being it's an iframe there is difference in SEO using HTML5 over flash, basically the old way is better for SEO.

CK	05-08-2011 03:35 PM

What are the positive/negatives for the end-user for html5 over flash and likewise for the forum owner?

BirdOPrey5

05-08-2011 07:18 PM

HTML5 is more compatible with newer devices like iPhones, iPads, and Android Tablets some of which don't do flash yet. It also means people who don't have flash installed for any number of security reasons can still use and see the videos. Overall HTML5 is a better technology for your users.

However as an admin there is a small tradeoff on SEO from what I've read. IFRAMES don't count towards your SEO so a URL that would be on your page from Flash embedding, perhaps with keywords in the URL or the embed code itself will not be present in the IFRAME/HTML5 code.

Personally I use HTML5 whenever possible as I'd rather keep the people currently on my site happy more than the small hit I might take with SEO.

gopherhockey

05-08-2011 08:15 PM

The world is going social and mobile quickly... I'm sure many of you have different experiences, but we're losing traffic to the likes of facebook every day. It doesn't help when people can't browse the forums with ease on their mobile devices.

It doesn't really matter what one thinks about flash, you have to appeal to the wider audience and reality is Apple doesn't support flash on its mobile devices, and many Android devices either can't run it, have promised "its coming", or find that their battery's drain too fast to make it worthwhile.

All this means I'm doing all I can to streamline the forums for mobile customers, and HTML5 is a key technology.

What was once an afterthought is now becoming a focus. I'm super thankful to have found this tip so that 95%+ of our inline videos now work under both technologies.

CK	05-08-2011 08:29 PM

So can I make the edits suggested without breaking the existing embedded youtube/vimeo/etc videos?

gopherhockey

05-08-2011 08:34 PM

Quote:

Originally Posted by ChemicalKicks (Post 2193418)

So can I make the edits suggested without breaking the existing embedded youtube/vimeo/etc videos?

I was able to make the change and so far all my testing has been positive. It not only worked with new videos, but past ones as well. It seems to serve up HTML5 when a user can support it, otherwise revert to flash.

It also seems to be working with a mod I have installed that automatically embeds videos for when people just past them into a post: https://vborg.vbsupport.ru/showthread.php?t=230707 (I had to do the change the author noted about 4.0.3 even though my forums are up to the latest version)

CK	05-08-2011 08:37 PM

My code looks like this, is this a no go?

Code:

<vb:elseif condition="$provider == 'youtube'" />

<object class="restrain" type="application/x-shockwave-flash" width="640" height="385" data="http://www.youtube.com/v/{vb:raw code}?version=3&amp;color1=0xb1b1b1&amp;color2=0xcfcfcf&amp;feature=player_embedded">

        <param name="movie" value="http://www.youtube.com/v/{vb:raw code}?version=3&amp;color1=0xb1b1b1&amp;color2=0xcfcfcf&amp;feature=player_embedded" />

        <param name="wmode" value="transparent" />

        <param name="allowfullscreen" value="true" />

        <!--[if IE 6]>

        <embed width="640" height="385" type="application/x-shockwave-flash" src="http://www.youtube.com/v/{vb:raw code}?version=3&amp;color1=0xb1b1b1&amp;color2=0xcfcfcf&amp;feature=player_embedded" allowfullscreen="true" />

        <![endif]--></object>

EDIT: Being an idiot, will give it a go and report back.

--------------- Added [DATE]1304890949[/DATE] at [TIME]1304890949[/TIME] ---------------

All working good. Is this something that's going to be rolled into vBulletin as standard?

BirdOPrey5

05-09-2011 02:10 AM

Quote:

Originally Posted by ChemicalKicks (Post 2193423)

All working good. Is this something that's going to be rolled into vBulletin as standard?

Best asked on vbulletin.com, but basically we don't know if/when they will ever change it in vBulletin code.

CK	05-09-2011 05:57 AM

I did a quick search of the tracker and found something partially related, pasted this thread link in as a suggestion and voted. Just do a search for html5 you should get 5 or so results.

Chadi

01-28-2014 11:19 PM

Quote:

Originally Posted by BirdOPrey5 (Post 2193320)

For Vimeo in the same template find:

Code:

<vb:elseif condition="$provider == 'vimeo'" />

<object class="restrain" type="application/x-shockwave-flash" width="640" height="360" data="http://vimeo.com/moogaloop.swf?clip_id={vb:raw code}">

    <param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id={vb:raw code}" />

    <param name="wmode" value="transparent" />

    <!--[if IE 6]>

    <embed width="640" height="360" type="application/x-shockwave-flash" src="http://vimeo.com/moogaloop.swf?clip_id={vb:raw code}" />

    <![endif]--></object>

Replace with:

Code:

<vb:elseif condition="$provider == 'vimeo'" />

    <iframe src="http://player.vimeo.com/video/{vb:raw code}?title=0&amp;byline=0&amp;portrait=0" width="640" height="360" frameborder="0"></iframe>

Note while HTML5 is the future, being it's an iframe there is difference in SEO using HTML5 over flash, basically the old way is better for SEO.

This method doesn't work for me on mobile (Safari, iOS 7). Works fine (flash) in desktop view. In mobile, the video simply doesn't show up at all.

All times are GMT. The time now is 04:54 PM.

X vBulletin 3.8.12 by vBS Debug Information
Page Generation 0.01146 seconds Memory Usage 1,757KB Queries Executed 10 (?)
More Information
Template Usage: (1)ad_footer_end (1)ad_footer_start (1)ad_header_end (1)ad_header_logo (1)ad_navbar_below (8)bbcode_code_printable (3)bbcode_quote_printable (1)footer (1)gobutton (1)header (1)headinclude (6)option (1)post_thanks_navbar_search (1)printthread (13)printthreadbit (1)spacer_close (1)spacer_open Phrase Groups Available: global postbit showthread	Included Files: ./printthread.php ./global.php ./includes/init.php ./includes/class_core.php ./includes/config.php ./includes/functions.php ./includes/class_hook.php ./includes/modsystem_functions.php ./includes/class_bbcode_alt.php ./includes/class_bbcode.php ./includes/functions_bigthree.php Hooks Called: init_startup init_startup_session_setup_start init_startup_session_setup_complete cache_permissions fetch_threadinfo_query fetch_threadinfo fetch_foruminfo style_fetch cache_templates global_start parse_templates global_setup_complete printthread_start bbcode_fetch_tags bbcode_create bbcode_parse_start bbcode_parse_complete_precache bbcode_parse_complete printthread_post printthread_complete
Messages: