PCEFX Youtube Embedding Upgrade - No more Adobe Flash, hello HTML5!

[NightWolve]

Hey guys,

I worked on PCEFX today with Aaron to modernize the Youtube embedding mod a bit to stop using Adobe Flash and instead use Youtube's prescribed way with an "<iframe>" tag where Youtube handles building the video player using HTML5-approved standards. I was annoyed enough about it and I wanted to put my coding skills to use here and help out!

This should stop all the problems in our Youtube thread and eliminate security issues (however small they were). Also, an added result/benefit, our thread will now work for Android and other Operating Systems that don't support Flash, so that's good too!

We had problems trying new Youtube SMF mods, so I wound up editing the one Aaron already had instead. Here is the PHP code I wrote to make this reality (mind you, it was a quick hack job):

Updated for Youtube, Facebook and Audio links (MP3, OGG, WAV)

Code: [Select]

// nightwolve start
  $URL = $input[2] . '';
// Handle Youtube
  $youtube = strstr($URL, "youtu");
  if ( $youtube ) {
    if ( ($URL = strstr($youtube, 'youtu.be/')) )
      $youtube = substr($URL, 9);
    else if ( ($URL = strstr($youtube, 'v=')) )
      $youtube = substr($URL, 2);
    else
      $youtube = $input[3];
    return '<P><iframe width="560" height="315" src="https://www.youtube.com/embed/' . $youtube . '" frameborder="0" allowfullscreen></iframe></P>';
  }
// Handle Facebook
  $facebook = strstr($URL, ".facebook.com");
  if ( $facebook ) {
    if ( strstr($URL, 'plugins/video.php') )
      $facebook = $URL;
    else
      $facebook = '[url]https://www.facebook.com/plugins/video.php?href='[/url] . URLEncode($URL) . '&show_text=0&width=560';
    return '<P><iframe src="' . $facebook . '" width="560" height="315" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" allowFullScreen="true"></iframe></P>';
  }
// Handle audio (mp3/ogg/wav)
  $ext = strtolower(substr($URL, -4));
  if ( $ext == ".mp3" || $ext == ".ogg" || $ext == ".wav" )
    return '<P><A HREF="' . $URL . '">' . $URL . '</A><BR><AUDIO SRC="' . $URL . '" CONTROLS></AUDIO></P>';
  return $URL;
// nightwolve end

I'm building the basic embed tag as prescribed by Youtube, with default width/height of 560x315 and for allowing fullscreen mode.

Code: [Select]

<iframe width="560" height="315" src="https://www.youtube.com/embed/YPXXslxEyvc" frameborder="0" allowfullscreen></iframe>
The reason I'm showing you this is to speak now or forever hold your peace in terms of adding useful formatting or other tweaks.

For example, I added enclosing '<p></p>' to get similar breaking as before, although it changes things somewhat you notice over time, like you'll only need one break if you have multiple Youtube links and you'll need one less break if you want a sentence above or below it, you'll see what I mean, put it that way.

I'm glad to help give ole PCEFX a little modern boost, took a bit to track the code down and rebuild a packaged mod based on the original to get this going. I actually set this mod up on my site first, tested out hacks/changes, then when it was ready I installed it here. After looking at the whole mod's features, I also disabled support for all other embedding and just left it for Youtube to avoid any problems/security issues.

Anyway, yeah, if you have any thoughts/suggestions on how to tweak, now's your chance while I can and am interested. I think I got it working pretty good so far, but that remains to be seen!

EDIT: So here's an inline test: It behaves as before, if you want auto-embed, you remove the 's', while leaving it to just paste the link.

E.g.

With 's'

Without:

[Necromancer]

I've no comment on how it works, but my hatris is off to ya for making it work. 

[crazydean]

I tried reading the post, but it makes no sense to me. Either way, thanks for the work! It is appreciated.

[PunkicCyborg]

Thanks NightWolve!!! Glad that's working right, makes the forum feel up to date   

[esteban]

Thank you, NightSolve.

[NightWolve]

No prob. It's just a minor convenience, to allow for embedding, nothing too special, but I got tired of the Youtube thread breaking cause of this war against Adobe Flash.

Anyway, round #2, I added embedding support for Facebook videos as I know I had a case where one wasn't on Youtube and I wanted to share it some time back.

When you're watching a video on Facebook, if you right-click it and select "Show Video URL", you can copy+paste that, remove the 's' from 'https:' and get an embedded result at the new standard width x height 560 x 315 (same as Youtube).

With 'https:' (the reason NOT to auto-embed EVERY link is the page load increases, 10 videos in a page becomes like 10 ads, sending out HTTP requests each time slowing things down)

s

With 'http:'
Or, if you copy the whole URL, as long as "plugins/video.php" is found in the URL string, it'll try to embed it also:

https://www.facebook.com/plugins/video.php?href=https%3A%2F%2Fwww.facebook.com%2FTheDarknessMov%2Fvideos%2Fvb.1033359266722116%2F1046904318700944%2F%3Ftype%3D3&show_text=0&width=560
My updated PHP code looks something like this now:

Code: [Select]

// nightwolve start
  $URL = $input[2] . '';
  $youtube = strstr($URL, "youtu");
  if ( $youtube ) {
    if ( ($URL = strstr($youtube, 'youtu.be/')) )
      $youtube = substr($URL, 9);
    else if ( ($URL = strstr($youtube, 'v=')) )
      $youtube = substr($URL, 2);
    else
      $youtube = $input[3];
    return '<P><iframe width="560" height="315" src="https://www.youtube.com/embed/' . $youtube . '" frameborder="0" allowfullscreen></iframe></P>';
  }
  $facebook = strstr($URL, ".facebook.com");
  if ( $facebook ) {
    if ( strstr($URL, 'plugins/video.php') )
      $facebook = $URL;
    else
      $facebook = '[url]https://www.facebook.com/plugins/video.php?href='[/url] . URLEncode($URL) . '&show_text=0&width=560';
    return '<P><iframe src="' . $facebook . '" width="560" height="315" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" allowFullScreen="true"></iframe></P>';
  }
  return $input[2];
// nightwolve end

Only other tweak I can think of ATM that's safe is to embed an audio .mp3/.MP3 link into an HTML5 audio tag, so as to allow instant play/pause in the post, rather than opening out another window to play it.

[esteban]

Only other tweak I can think of ATM that's safe is to embed an audio .mp3/.MP3 link into an HTML5 audio tag, so as to allow instant play/pause in the post, rather than opening out another window to play it.

Oh, yes!

That actually would be great.

[NightWolve]

Only other tweak I can think of ATM that's safe is to embed an audio .mp3/.MP3 link into an HTML5 audio tag, so as to allow instant play/pause in the post, rather than opening out another window to play it.

Oh, yes! That actually would be great. 

Done!! MP3, OGG or WAV allowed. The link is printed first, a <BR> break, then a simple HTML5 audio tag with controls enabled.
http://www.ysutopia.net/audio/YsIII-07-The-Boy-Who-Had-Wings.mp3
http://www.ysutopia.net/audio/YsIII-17-Seal-of-Time.mp3

http://www.ysutopia.net/downloads/fs/FS_15_0E51000.wav
http://www.ysutopia.net/downloads/fs/FS_04_0D9A000.wav

Code: [Select]

// Handle audio (mp3/ogg/wav)
  $ext = strtolower(substr($URL, -4));
  if ( $ext == ".mp3" || $ext == ".ogg" || $ext == ".wav" )
    return '<P><A HREF="' . $URL . '">' . $URL . '</A><BR><AUDIO SRC="' . $URL . '" CONTROLS></AUDIO></P>';
  return $URL;


[esteban]

Only other tweak I can think of ATM that's safe is to embed an audio .mp3/.MP3 link into an HTML5 audio tag, so as to allow instant play/pause in the post, rather than opening out another window to play it.

Oh, yes! That actually would be great. 

Done!! MP3, OGG or WAV allowed. The link is printed first, a <BR> break, then a simple HTML5 audio tag with controls enabled.

http://www.ysutopia.net/audio/YsIII-07-The-Boy-Who-Had-Wings.mp3
http://www.ysutopia.net/audio/YsIII-17-Seal-of-Time.mp3

http://www.ysutopia.net/downloads/fs/FS_15_0E51000.wav
http://www.ysutopia.net/downloads/fs/FS_04_0D9A000.wav

Code: [Select]

// Handle audio (mp3/ogg/wav)
  $ext = strtolower(substr($URL, -4));
  if ( $ext == ".mp3" || $ext == ".ogg" || $ext == ".wav" )
    return '<P><A HREF="' . $URL . '">' . $URL . '</A><BR><AUDIO SRC="' . $URL . '" CONTROLS></AUDIO></P>';
  return $URL;


This is so awesome

It creates a nicer experience (on computer), since you stay within PCEfx universe.

I'll have to see how Tapatalk handles it (not holding my breath, the app still doesn't support SRTRIKETHROUH Strikethrough.

[esteban]

Test:

 http://junk.tg-16.com/audio/Psychic_Storm/Track_05.mp3

[blueraven]

Cool! Thanks for taking the time to make this work

cheers

[Gentlegamer]

Awesome!

But why didn't you choose an OBEY video for demonstration?

[TR0N]

Dunno about it being fixed all i get are you're body message was empty  For embedding youtube videos.

[NightWolve]

Hey Tron, I noticed that too if you type nothing else and just the YouTube link. You must add at least one word, comment or you'll get the error mentioned. I'll see about fixing this though eventually. But typing something extra is a workaround in the meantime. Even just pushing the space bar after the link and typing a '.' or something workarounds it if you have nothing to say.

Alright Tron, I too occasionally fight for the user! I took a look at it now and figured it out!

It's SMF Forum code, not this Embed Mod where the problem occurs. Normally, it only excludes "<img>" tags from stripping, so if you used {IMG}{/IMG} by itself in a post, it won't generate an empty message error! The creator of the Youtube Embed Mod was using <object> and <embed> tags for Flash which he'd append to the code AFTER <img>, but I eliminated use of those tags and now use only <iframe> and <audio> for HTML5 support. I needed to reflect this change to this strip check code, below is the before and after changes in "SMF/Sources/Post.php":

Code: [Select]

if ($smcFunc['htmltrim'](strip_tags(parse_bbc($_POST['message'], false), '<img><object><embed>')) === '')
{
$post_errors[] = 'no_message';
unset($_POST['message']);
}

We needed to change it to '<img><iframe><audio>' to also leave my iframe and audio tags alone, not strip them out and then throw a, "Hey, empty, no message" error:

Code: [Select]

// Let's see if there's still some content left without the tags.
if ($smcFunc['htmltrim'](strip_tags(parse_bbc($_POST['message'], false), '<img><iframe><audio>')) === '')
{
$post_errors[] = 'no_message';
unset($_POST['message']);
}

The idea is basically to strip out spaces, empty BBC code if you put nothing in it, etc. and then see if that amounts to no string, nothing, etc. then throw a 'no message' error. A Youtube link by itself gets converted to an <iframe></iframe> tag and if that's the ONLY thing in your post, it'd get stripped out, triggering the 'no_message' error...

This code was too cautious to protect against empty posts, in some sense... Commenting the whole thing out works too, but I just appended <iframe><audio> to its exclude list, so whatever.

Anyway, with your reminder of this, I said what the hell, and the fix was easy enough, so there ya go! Try again, lemme know!

[esteban]

Thank you!