Tech Tip: Simple Media Player with Web Area

PRODUCT: 4D | VERSION: 14.x | PLATFORM: Mac & Win

Published On: May 10, 2016

It is possible to run play media files easily in 4D using HTML5 <audio> and <video> elements.

Below is a sample method to construct the HTML file:

// HTMLCreateMediaPlayer
//
// Desription:
// Creates an HTML file to play a local media file
//
// Parameters:
// $1: Pointer to an Array
// $2: File Type of the Media file
// = 1 - audio mp3
// = 2 - audio ogg
// = 3 - audio wav
// = 4 - video mp4
// = 5 - video webm
// = 6 - video ogg
// $3: Error message if file type is not supported
// $4: Name of html file
// Results:
// $0: Resulting full file path of html to pass into Web Area
// Disclaimer:
// Some file types are not supported on some browsers
// ----------------------------------------------------

C_TEXT($1;$mediaPath_t)
C_LONGINT($2;$fileType_l)
C_TEXT($3;$errorMsg_t)
C_TEXT($4;$htmlName_t)
C_TEXT($0;$htmlPath_t)
C_TEXT($fileType_t;$html)

$mediaPath_t:=$1
$fileType_l:=$2
$errorMsg_t:=$3
$htmlName_t:=$4

Case of
   :($fileType_l=1)
   $fileType_t:="audio/mpeg"
   : ($fileType_l=2)
   $fileType_t:="audio/ogg"
   : ($fileType_l=3)
   $fileType_t:="audio/wav"
   : ($fileType_l=4)
   $fileType_t:="video/mp4"
   : ($fileType_l=5)
   $fileType_t:="video/webm"
   : ($fileType_l=6)
   $fileType_t:="video/ogg"
End case

$html:="<!DOCTYPE html><html><body>"
If($fileType_l<4)
   $html:=$html+"<audio controls><source src=\""
Else
   $html:=$html+"<video width="320" height="240" controls><source src=\""
End if
$html:=$html+$mediaPath_t+" Type=\""+$fileType_t+"\">"+$errorMsg_t
$html:=$html+" </audio></body></html>"

$htmlPath_t:=Get 4D folder(Current resources folder)+$htmlName_t
TEXT TO DOCUMENT($htmlPath_t;$html)
$0:=$htmlPath_t

Then simply pass the result to a Web Area on a form.
For example place a button on a form with the following code:

$html:=HTMLCreateMediaPlayer($filePath;3;"Unsupported Type";"html.html")
WA OPEN URL(*;"Web Area";$html)

And click it to get the following:

Additional modifications can be made by looking into the HTML

Commented by Add Komoncharoensiri on May 11, 2016 at 9:23 AM

This Tech Tip has been revised again on May 10th, 2016. The syntax problem that was reported should now be fixed.

Commented by Unspecified Unspecified on May 6, 2016 at 2:14 AM

Erreur de syntaxe à la ligne : $html:=$html $mediaPath_t "\" Type=\"" $fileType_t "\">"