Add capability to play HTML5 native formats without bbcode

[shortmort37]

I'd like to see an extension that incorporates the edits I describe below. These add the capability to play mp4, webm and ogv video attachments, and mp3 audio attachments natively within an HTML5-compatible browser, without the use of bbcode, e.g., [media]. This makes it easier for my non-tech-savvy users to upload videos to my hosted site, without having to reference another location for the video, and without having to wrap with bbcode.

I'm just a hacker, not a developer, so if someone could run with this as an extension I think it might be useful. Many thanks to AmigoJack for getting me this far - his attribution is in the edits.

Dan

Open /includes/constants.php and find:

Code: Select all

// Categories - Attachments
define('ATTACHMENT_CATEGORY_NONE', 0);
define('ATTACHMENT_CATEGORY_IMAGE', 1); // Inline Images
define('ATTACHMENT_CATEGORY_WM', 2); // Windows Media Files - Streaming
define('ATTACHMENT_CATEGORY_RM', 3); // Real Media Files - Streaming
define('ATTACHMENT_CATEGORY_THUMB', 4); // Not used within the database, only while displaying posts
define('ATTACHMENT_CATEGORY_FLASH', 5); // Flash/SWF files
define('ATTACHMENT_CATEGORY_QUICKTIME', 6); // Quicktime/Mov files                         

After, add:

Code: Select all

define('ATTACHMENT_CATEGORY_HTML5', 7); // Native HTML5 files                         

Open /language/en/acp/attachments.php and find:

Code: Select all

    'CAT_FLASH_FILES'            => 'Flash files',
    'CAT_IMAGES'                => 'Images',
    'CAT_QUICKTIME_FILES'        => 'Quicktime media files',
    'CAT_RM_FILES'                => 'RealMedia media files',
    'CAT_WM_FILES'                => 'Windows Media media files', 

After, add:

Code: Select all

'CAT_H5_FILES'                => 'HTML5 native media files', 

Open /includes/acp/acp_attachments.php and find:

Code: Select all

                $cat_lang = array(
                    ATTACHMENT_CATEGORY_NONE        => $user->lang['NO_FILE_CAT'],
                    ATTACHMENT_CATEGORY_IMAGE        => $user->lang['CAT_IMAGES'],
                    ATTACHMENT_CATEGORY_WM            => $user->lang['CAT_WM_FILES'],
                    ATTACHMENT_CATEGORY_RM            => $user->lang['CAT_RM_FILES'],
                    ATTACHMENT_CATEGORY_FLASH        => $user->lang['CAT_FLASH_FILES'],
                    ATTACHMENT_CATEGORY_QUICKTIME    => $user->lang['CAT_QUICKTIME_FILES'],

After, add:

Code: Select all

                    ATTACHMENT_CATEGORY_HTML5        => $user->lang['CAT_H5_FILES'],

In the same file, find:

Code: Select all

        $types = array(
            ATTACHMENT_CATEGORY_NONE        => $user->lang['NO_FILE_CAT'],
            ATTACHMENT_CATEGORY_IMAGE        => $user->lang['CAT_IMAGES'],
            ATTACHMENT_CATEGORY_WM            => $user->lang['CAT_WM_FILES'],
            ATTACHMENT_CATEGORY_RM            => $user->lang['CAT_RM_FILES'],
            ATTACHMENT_CATEGORY_FLASH        => $user->lang['CAT_FLASH_FILES'],
            ATTACHMENT_CATEGORY_QUICKTIME    => $user->lang['CAT_QUICKTIME_FILES'],

After, add:

Code: Select all

            ATTACHMENT_CATEGORY_HTML5    => $user->lang['CAT_H5_FILES'],

Open /includes/functions_content.php and find:

Code: Select all

        $block_array += array(
            'UPLOAD_ICON'        => $upload_icon,
            'FILESIZE'            => $filesize['value'],
            'SIZE_LANG'            => $filesize['unit'],
            'DOWNLOAD_NAME'        => utf8_basename($attachment['real_filename']),
            'COMMENT'            => $comment,

After, add:

Code: Select all

            /*** 2015-06-01 BEGIN AmigoJack
                https://www.phpbb.com/community/viewtopic.php?f=71&t=2318416 ***/
            'MIMETYPE'=> $attachment['mimetype'],
            /*** 2015-06-01 END ***/

In the same file, find:

Code: Select all

                // Windows Media Streams
                case ATTACHMENT_CATEGORY_WM:

                    // Giving the filename directly because within the wm object all variables are in local context making it impossible
                    // to validate against a valid session (all params can differ)
                    // $download_link = $filename;

                    $block_array += array(
                        'U_FORUM'        => generate_board_url(),
                        'ATTACH_ID'        => $attachment['attach_id'],
                        'S_WM_FILE'        => true,
                    );

                    // Viewed/Heared File ... update the download count
                    $update_count[] = $attachment['attach_id'];
                break;

After, add:

Code: Select all

                // Native HTML5 Media Streams
                case ATTACHMENT_CATEGORY_HTML5:

                    // HTML browsers play mp4, webm and ogg video formats - and, the mp3 audio format - natively

                    $block_array += array(
                        'U_FORUM'        => generate_board_url(),
                        'ATTACH_ID'        => $attachment['attach_id'],
                        'S_H5_FILE'        => true,
                    );

                    // Viewed/Heared File ... update the download count
                    $update_count[] = $attachment['attach_id'];
                break; 

Open /includes/functions_download.php and find (attributions to kasimi):

Code: Select all

* For full copyright and license information, please see
* the docs/CREDITS.txt file.
*
*/

After, add:

Code: Select all

use Symfony\Component\HttpFoundation\BinaryFileResponse;
use phpbb\symfony_request;

In the same file, find:

Code: Select all

	if (!@file_exists($filename))
	{
		send_status_line(404, 'Not Found');
		trigger_error('ERROR_NO_ATTACHMENT');
	}

After, add:

Code: Select all

    // *** Adding HTML5 audio/video content!  Caveat Emptor
    if ($category == ATTACHMENT_CATEGORY_HTML5)
    {
		$response = new BinaryFileResponse($filename);
		if ($attachment['mimetype'] == 'video/mp4')
		{
			$response->headers->set('Content-Type', 'video/mp4');
		} 
		elseif ($attachment['mimetype'] == 'audio/mp3')
		{
			$response->headers->set('Content-Type', 'audio/mp3');
		}
     global $request;
	 $response->prepare(new symfony_request($request)); 
     $response->send();
     exit;
    }

Find in styles/prosilver/template/attachment.html:

Code: Select all

		<!-- ELSEIF _file.S_QUICKTIME_FILE -->
			<object id="qtstream_{_file.ATTACH_ID}" classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab#version=6,0,2,0" width="320" height="285">
				<param name="src" value="{_file.U_DOWNLOAD_LINK}" />
				<param name="controller" value="true" />
				<param name="autoplay" value="false" />
				<param name="type" value="video/quicktime" />
				<embed name="qtstream_{_file.ATTACH_ID}" src="{_file.U_DOWNLOAD_LINK}" pluginspage="http://www.apple.com/quicktime/download/" enablejavascript="true" controller="true" width="320" height="285" type="video/quicktime" autoplay="false"></embed>
			</object>

After, add (attribution to Leinad4Mind):

Code: Select all

      <!-- ELSEIF _file.S_H5_FILE -->
         <!-- IF _file.MIMETYPE == 'audio/mp3' -->
            <audio src="{_file.U_DOWNLOAD_LINK}" name="media" controls="true">
            <source src="{_file.U_DOWNLOAD_LINK}" type="{_file.MIMETYPE}" controls="true">
            </audio>
         <!-- ELSE -->
            <video src="{_file.U_DOWNLOAD_LINK}" width='80%' width='80%' controls="true">
            <source src="{_file.U_DOWNLOAD_LINK}" type="{_file.MIMETYPE}" controls="true">
            </video>
         <!-- ENDIF -->

In the same file, find:

Code: Select all

		<!-- IF _file.S_WM_FILE or _file.S_RM_FILE or _file.S_FLASH_FILE or _file.S_QUICKTIME_FILE -->

Edit this line to:

Code: Select all

		<!-- IF _file.S_WM_FILE or _file.S_RM_FILE or _file.S_FLASH_FILE or _file.S_QUICKTIME_FILE or _file.S_H5_FILE -->

Find in phpbb/mimetype/extension_guesser.php:

Code: Select all

'mp3'		=> 'audio/x-mpeg-3',

Edit this line to:

Code: Select all

'mp3'		=> 'audio/mp3',

In the ACP on the main page, purge the cache. Then, go to Posting -> Manage attachment extension groups, add group name "HTML5" and assign the special category "HTML5 native media files" to it. Then go to manage extensions, and if the extensions "mp4", "webm", "ogv" and "mp3" do not already exist, create them, and add them to the "HTML5" extension group.

You should now be able to upload mp4, webm and ogv video files and mp3 audio files and play them natively in an HTML5 compatible browser. On my desktop Windows computer, it works with Chrome and Firefox. N.B.: IE9 and above need a little help with HTML5. mp4's will play natively; webm needs a download: http://www.webmproject.org/ie. I have read that IE will play ogv's with the VLC player as a plugin, but I have not tried. IE11 on my desktop plays mp4's readily, but needed the download to play webm.

[Tabitha2]

This code allows to read attachments mp3?

Thanks

[shortmort37]

This code allows to read attachments mp3?

No, but you should be able to convert an mp3 to an mp4 with a tool like this:

http://www.any-video-converter.com/

And it will play that way.

Dan

[shortmort37]

This code allows to read attachments mp3?

No, but you should be able to convert an mp3 to an mp4 with a tool like this:

http://www.any-video-converter.com/

And it will play that way.

Ah! mp3 is a native audio format for html5. I will edit the code accordingly.

Dan

[Tabitha2]

News Dan?

The extension and in preparation?

This project is very interesting, I guess that there are many interested people

[Tabitha2]

I found this code (mod) for phpbb 3.0.X

Code: Select all

Un lecteur MP3 en utilisant les fichiers joints url : http://forums.phpbb-fr.com/documentation-phpbb3/sujet159455.html

1) Les modifications de code.

      Il vous faut tout d'abord télécharger et mettre à la racine de votre forum le fichier dewplayer.swf
      Vous pourrez le trouver ICI: http://www.alsacreations.fr/dewplayer

      Puis sous phpmyadmin, exécutez cette requête: (attention au préfixe qui par défaut est phpbb_ mais qui peut être différent pour vous)
	  
	      INSERT INTO `phpbb3_extension_groups` (`group_id`, `group_name`, `cat_id`, `allow_group`, `download_mode`, `upload_icon`, `max_filesize`, `allowed_forums`, `allow_in_pm`) VALUES ('','Fichiers Dewplayer', 7, 0, 1, '', 0, '', 0);
		  
		        Puis ouvrir languages/fr/acp/attachments.php
      chercher:

      Code: Tout sélectionner
          'CAT_WM_FILES'   => 'Fichier Windows Media',


      aprés ajouter:

      Code: Tout sélectionner
          'CAT_DEWPLAYER_FILES'   => 'Fichier Dewplayer.',



      Puis ouvrir languages/en/acp/attachments.php
      chercher:

      Code: Tout sélectionner
          'CAT_WM_FILES'=> 'Windows Media media files',


      aprés ajouter:

      Code: Tout sélectionner
          'CAT_DEWPLAYER_FILES'   => 'Dewplayer files.',



      ouvrir includes/constants.php
      chercher:

      Code: Tout sélectionner
          define('ATTACHMENT_CATEGORY_QUICKTIME', 6); // Quicktime/Mov files


      après ajouter:

      Code: Tout sélectionner
          define('ATTACHMENT_CATEGORY_DEWPLAYER', 7); // DEWPLAYER files



      ouvrir includes/acp/acp_attachment.php
      chercher (deux fois, aux environs des lignes 589 et 1072):

      Code: Tout sélectionner
          ATTACHMENT_CATEGORY_QUICKTIME   => $user->lang['CAT_QUICKTIME_FILES'],


      après ajouter:

      Code: Tout sélectionner
          ATTACHMENT_CATEGORY_DEWPLAYER     => $user->lang['CAT_DEWPLAYER_FILES'],



      ouvrir includes/functions_content.php
      chercher: (ligne 973 environ)

      Code: Tout sélectionner
          // Real Media Streams



      Avant ajoutez:

      Code: Tout sélectionner
                     // Dewplayer files
                      case ATTACHMENT_CATEGORY_DEWPLAYER:
                         $l_downloaded_viewed = 'VIEWED_COUNT';

                         // Giving the filename directly because within the wm object all variables are in local context making it impossible
                         // to validate against a valid session (all params can differ)
                         // $download_link = $filename;

                         $block_array += array(
                            'U_FORUM'      => generate_board_url(),
                            'ATTACH_ID'      => $attachment['attach_id'],
                            'S_DEWPLAYER_FILE'   => true,
                         );

                         // Viewed/Heared File ... update the download count
                         $update_count[] = $attachment['attach_id'];
                      break;



      puis ouvrir:
      styles/votre_style/template/attachment.html
      chercher:

      Code: Tout sélectionner
          <!-- IF _file.S_WM_FILE -->


      avant ajoutez

      Code: Tout sélectionner
                <!-- IF _file.S_DEWPLAYER_FILE -->
                  <object type="application/x-shockwave-flash" data="dewplayer.swf?mp3={_file.U_DOWNLOAD_LINK}&autostart=0&autoreplay=0" width="200" height="20"><param name="wmode" value="transparent" /><param name="movie" value="dewplayer.swf?mp3={_file.U_DOWNLOAD_LINK}&autostart=0&autoreplay=0" /></object>
                <!-- ENDIF -->


      Enfin, il ne vous reste qu'à vider le cache du forum


2) L'utilisation sur le forum.

      Pour cela, rendez-vous dans le panneau d'administration, onglet "messages" puis dans le menu de gauche cliquez sur "gérer les extensions" et ajoutez l'extension mp3 au groupe "Fichiers Dewplayer".
      Ensuite dans le menu de gauche cliquez sur "Gérer les groupes d’extensions", puis cliquez sur l'icône verte en face de "Fichiers Dewplayer ".
      Vous arrivez sur la page de gestion de ce groupe d'extension ou vous pouvez autoriser le groupe, définir une icône particulière, fixer la taille des fichiers et choisir les forums ou cette fonction est autorisée.

      Il vous suffit maintenant de rajouter un fichier mp3 dans les fichiers joints, et vous pourrez le lire directement dans vos messages.


3) Quelques améliorations.

      Comme vous pouvez le voir, cette astuce affiche seulement un simple player mp3.
      Vous pouvez cependant rajouter des informations dans la partie "fichiers joints" comme le nom du titre, son poids et le nombre de fois qu'il a été vu. De plus en cliquant sur le nom du titre vos membres pourront télécharger le titre

      /!\ ATTENTION: Le fait de proposer des titres en téléchargement peut etre considéré comme illégal si ce ne sont pas vos propres travaux. !!!!
      De plus il faut savoir que cela augmente le trafic sur votre forum et si vous êtes limité, cela peut bloquer votre forum.

      Pour ajouter ces informations remplacer dans styles/votre_style/template/attachment.html le code proposé au dessus par:

      Code: Tout sélectionner
          <!-- IF _file.S_DEWPLAYER_FILE -->
                  <object type="application/x-shockwave-flash" data="dewplayer.swf?mp3={_file.U_DOWNLOAD_LINK}&autostart=0&autoreplay=0" width="200" height="20"><param name="wmode" value="transparent" /><param name="movie" value="dewplayer.swf?mp3={_file.U_DOWNLOAD_LINK}&autostart=0&autoreplay=0" /></object>
                <br /><a href="{_file.U_DOWNLOAD_LINK}">{_file.DOWNLOAD_NAME}</a> [ {_file.FILESIZE} {_file.SIZE_LANG} | {_file.L_DOWNLOAD_COUNT} ]
               <!-- ENDIF -->



      - Si vous ne voulez pas permettre le téléchargement:
      remplacez

      Code: Tout sélectionner
          <a href="{_file.U_DOWNLOAD_LINK}">{_file.DOWNLOAD_NAME}</a>


      par

      Code: Tout sélectionner
          {_file.DOWNLOAD_NAME}


      - Pour cacher la taille du titre:
      supprimez:

      Code: Tout sélectionner
          {_file.FILESIZE} {_file.SIZE_LANG} |


      - Pour cacher le nombre de fois qu'un fichier à été vu:
      supprimez:

      Code: Tout sélectionner
          | {_file.L_DOWNLOAD_COUNT} 

[shortmort37]

Hi Tabitha,

My French is not very good , but I was able to decipher that the code you cite is referencing a proprietary player. My goal is to modify phpBB to play all formats native to HTML5.

While I can cobble together some webcode that will permit you to play mp3 with the native <audio> player (you simply rename the mp3 to mp4a), I was unsuccessful in forking between <video> mp4 and <audio> mp4a in attachment.html. I've got some debugging tools now, but not the time to play with them. Perhaps someone else can experiment? In a week or so, I will have more time and will return to it.

Thanks
Dan

[Tabitha2]

I'd wait time
thanks

[Tabitha2]

BBcode for a player audio/video html5

https://www.404techsupport.com/2009/12/ ... for-phpbb/

[shortmort37]

Thanks, Tabitha! This is easier yet - I had avoided bbcode, because most of them I had seen also incorporated a proprietary player. But this doesn't - it relies on the native capabilities of HTML5 compatibility, and eliminates the need for my hack.

Bravo!

Dan

[Lumpy Burgertushie]

it works for some but not all of the listed file types.

one of the links on that page shows a file of .ogg
that one is not a valid mime type for this method

the other one is .flv that is a flash file and it also says not a valid mime type.
and the 3gp doesn't seem to work well.
every 3gp file I tried comes back as being corrupt.


using firefox 38.0.1

mp4 works, ogv works, webm works

robert

[shortmort37]

Thanks, Tabitha! This is easier yet - I had avoided bbcode, because most of them I had seen also incorporated a proprietary player. But this doesn't - it relies on the native capabilities of HTML5 compatibility, and eliminates the need for my hack.

Well, I spoke too soon; this assumes the person who uploads a video attachment can reference a URL that points to it. But, uploaded attachments get renamed a unique filename (to avoid collisions), and are assigned an id so that they are referenced like this:

Code: Select all

<video controls name="media" width="320" height="285">
					<source src="./download/file.php?id=7390" type="video/mp4">
				</video>

So, I'm afraid I'm stuck with my hack, until someone makes it into an extension. Meanwhile, I'll continue to play with the mp4 stuff.

Dan

[martin123456]

Code above firefox 39 on linux no sound on player but chrome is good.

For mp3

viewtopic.php?f=70&t=2101877

[shortmort37]

Yeah. Except, HTML5 has native capability to play MP3's, *without* downloading a player. That's what I'm attempting to do.

Dan

[shortmort37]

I'd wait time
thanks

Your wait is over, Tabitha! I've revised the hacks above to include utilizing the native capability of HTML5 browsers to play MP3 files. No need to change the extension, either - just upload with a .mp3 extension.

Thanks for encouraging me to do this. Now, if we could just get someone more knowledgeable than me, to create an extension...

Dan