HTML5 AUDIO & VIDEO PLAYERS

Published on by Yousfi Benameur

HTML 5 is a revision of the Hypertext Markup Language (HTML), the standard programming language for describing the  contents and appearance of Web pages.HTML5 is a core technology markup language of the Internet used for structuring and presenting content for the World Wide Web.

HTML5 is intended to subsume not only HTML 4, but also XHTML 1 and DOM Level 2 HTML.[4]
ref:http://en.wikipedia.org/wiki/HTML5

 

Using HTML5 video, you can embed a full featured video player (or audio player) on your webpage, without requiring a third-party plug-in  or even JavaScript or flash.
its done with a single line of HTML.

<video src="demo.mp4" controls autoplay >HTML5 Video is required for this example</video>

ref:https://html.spec.whatwg.org/multipage/embedded-content.html#the-video-element

below 5 codes to traverse from vfp the html5 video/audio player.

 

All is tested on Windows8.1 only.

HTML5 AUDIO &amp; VIDEO PLAYERS

*1*

This is a try to make an html5 video player(or  audio player) working by automation from visual foxpro.

Get a video or audio valid file on disc or chose in the library(combo), then create/fill the player button.
the code creates by automation the video/audio player in the vfp browser (mandatory with emulation as ie11 to support
 the html5).
you can do these things:

-play/pause button the media.this i cannot make it by automation (play, pause dont work from vfp.it work     only from inner javascript !).

thisform.obrowser.document.getElementById("yvideo1").play()     &&dont work

thisform.obrowser.document.getElementById("yvideo1").pause()  &&dont work

i made a script in the navigated file and automate it from vfp (see function playPause() ).

thisform.oBrowser.Document.Script.playPause("")  &&run the first script javascript function
-Fortunatly another functions work well by automation

-return informations from the media file(src,duration), the width/height of the media
-can adjust the volume + or - or mute
-can show /hide the controls.
-can change the poster (any image from disc or from the web)
-A timer measure the currentTime of the media and fills a textbox.
-this is the basics.Can extend to advanced things....
On IE the media supported actually on html5 vide/audio : mp4,mp3 for sure.can try others (a message is shown on the control bar if not valid media).

The duration information is returned when the media is loaded(click button).


 

*Begin Code
Publi yform,yvideo
yform=Newobject("yhtml5Player")
yform.Show
Read Events
Return
*
Define Class yhtml5Player As Form
    Height = 631
    Width = 940
    ShowWindow = 2
    ShowTips = .T.
    AutoCenter = .T.
    Caption = "HTML video/audio Player automation"
    Name = "Form1"

 

    Add Object obrowser As OleControl With ;
        oleclass="shell.explorer.2",;
        Top = 45, ;
        Left = 247, ;
        Height = 560, ;
        Width = 677, ;
        Anchor = 0, ;
        Name = "oBrowser"

    Add Object command1 As CommandButton With ;
        Top = 82, ;
        Left = 22, ;
        Height = 36, ;
        Width = 156, ;
        FontBold = .T., ;
        Caption = "Create /Fill  the player", ;
        BackColor = Rgb(255,128,0), ;
        Name = "Command1"

    Add Object command4 As CommandButton With ;
        Top = 473, ;
        Left = 132, ;
        Height = 25, ;
        Width = 30, ;
        FontBold = .T., ;
        Caption = "Vol+", ;
        BackColor = Rgb(0,255,0), ;
        Name = "Command4"

    Add Object command5 As CommandButton With ;
        Top = 473, ;
        Left = 161, ;
        Height = 25, ;
        Width = 30, ;
        FontBold = .T., ;
        Caption = "Vol-", ;
        BackColor = Rgb(0,255,0), ;
        Name = "Command5"

    Add Object command9 As CommandButton With ;
        Top = 473, ;
        Left = 190, ;
        Height = 25, ;
        Width = 34, ;
        FontBold = .T., ;
        Caption = "Mute", ;
        BackColor = Rgb(0,255,0), ;
        Name = "Command9"

    Add Object command8 As CommandButton With ;
        Top = 420, ;
        Left = 112, ;
        Height = 37, ;
        Width = 128, ;
        FontBold = .T., ;
        FontSize = 10, ;
        Caption = "Show/Hide controls", ;
        BackColor = Rgb(0,255,0), ;
        Name = "Command8"

    Add Object command11 As CommandButton With ;
        Top = 420, ;
        Left = 2, ;
        Height = 37, ;
        Width = 109, ;
        FontBold = .T., ;
        FontSize = 10, ;
        Caption = "Change Poster", ;
        BackColor = Rgb(0,255,0), ;
        Name = "Command11"

    Add Object command12 As CommandButton With ;
        Top = 372, ;
        Left = 48, ;
        Height = 25, ;
        Width = 132, ;
        FontBold = .T., ;
        FontSize = 10, ;
        Caption = "Video Infos", ;
        BackColor = Rgb(0,255,0), ;
        Name = "Command12"

    Add Object edit1 As EditBox With ;
        Height = 241, ;
        Left = 10, ;
        ReadOnly = .T., ;
        ScrollBars = 2, ;
        Top = 125, ;
        Width = 228, ;
        BackColor = Rgb(255,255,159), ;
        DisabledBackColor = Rgb(255,255,128), ;
        Name = "Edit1"

    Add Object command13 As CommandButton With ;
        Top = 468, ;
        Left = 3, ;
        Height = 36, ;
        Width = 123, ;
        FontBold = .T., ;
        FontSize = 12, ;
        Caption = "Play/Pause", ;
        BackColor = Rgb(0,255,0), ;
        Name = "Command13"

    Add Object text1 As TextBox With ;
        FontBold = .T., ;
        Height = 25, ;
        Left = 12, ;
        Top = 516, ;
        Width = 144, ;
        ForeColor = Rgb(0,255,0), ;
        BackColor = Rgb(0,0,0), ;
        Name = "Text1"

    Add Object timer1 As Timer With ;
        Top = 504, ;
        Left = 120, ;
        Height = 23, ;
        Width = 23, ;
        Enabled = .F., ;
        Interval = 1000, ;
        Name = "Timer1"

    Add Object command7 As CommandButton With ;
        Top = 2, ;
        Left = 14, ;
        Height = 27, ;
        Width = 49, ;
        FontBold = .T., ;
        Caption = "....", ;
        MousePointer = 15, ;
        ToolTipText = "Get a valid video or audio file or ur type an URL in textbox", ;
        ForeColor = Rgb(255,0,0), ;
        BackColor = Rgb(0,255,0), ;
        Name = "Command7"

    Add Object yvid As TextBox With ;
        FontSize = 11, ;
        Height = 27, ;
        Left = 69, ;
        Top = 1, ;
        Width = 841, ;
        Name = "yVid"

    Add Object yhelp As Label With ;
        FontSize = 16, ;
        Fontbold=.T.,;
        caption="?",;
        backstyle=0,;
        forecolor=255,;
        mousepointer=15,;
        tooltiptext="Summary help",;
        Height = 27, ;
        Left = 915, ;
        Top = 1, ;
        Width = 22, ;
        Name = "yhelp"

    Add Object combo1 As ComboBox With ;
        Height = 27, ;
        Left = 25, ;
        ToolTipText = "Media Library", ;
        Top = 41, ;
        Width = 181, ;
        Name = "Combo1"

    Procedure Destroy

   try
    yvideo=null
    yvideo release
    catch
    endtry
        Clea Events
    Endproc

    Procedure Load
        Declare Integer Sleep In kernel32 Integer
        Set Safe Off
    Endproc

    Procedure Init
        Thisform.SetAll("mousepointer",15,"commandbutton")
    Endproc

    Procedure obrowser.Init
        Local m.myvar
        TEXT to m.myvar noshow
        <html>
        <head>
        <script>

        function playPause() {
        var myVideo = document.getElementById("yvideo1");
            if (myVideo.paused)
                myVideo.play();
            else
                myVideo.pause();
        }
        </script>
        <body bgcolor=black>

        </body>
        </html>
        ENDTEXT
        Local m.lcdest
        m.lcdest=Addbs(Sys(2023))+"yvid.html"
        Strtofile(m.myvar,m.lcdest)

        This.Navigate(m.lcdest)
    Endproc

    Procedure command1.Click
        oo=Thisform.obrowser.Document
        If !Vartype(m.oo)="O"
            Return .F.
        Else
        Endi


        If Empty(Thisform.yvid.Value)
            Messagebox("get a video file or url first!",16+4096,"",1500)
            Return .F.
        Endi

        With Thisform.obrowser.Document
            .body.Scroll="no"
            .bgcolor=0
            Sleep(600)
            If !Vartype(yvideo)="O"
                   yvideo=.createElement("video")
                .body.appendChild(yvideo)
                With  yvideo
                    .Id ="yvideo1"
                    .autoPlay=.F.
                    .Controls=.T.
                    .poster=  "http://www.spacetelescope.org/static/archives/images/screen/potw1441a.jpg"
                    .Width =Thisform.obrowser.Width-10
                    .Height=Thisform.obrowser.Height-20
                Endwith
            Endi

            With yvideo
                .src=""
                .src = Thisform.yvid.Value
                .Load(.src)
            Endwith
            Sleep(1000)  && to load the video and retrieve  correctly some data wanted

            With Thisform
                .text1.Value=""
                .edit1.Value=""
                .command12.Click()
            Endwith

        Endwith

    Endproc

    Procedure command4.Click
        Try
            With Thisform.obrowser.Document.getElementById("yvideo1")
                x=.Volume
                If .Volume<=0.9
                    .Volume=.Volume+.1
                Endi
            Endwith
        Catch
        Endtry
    Endproc

    Procedure command5.Click
        Try
            With Thisform.obrowser.Document.getElementById("yvideo1")
                x=Trans(.Volume)
                If .Volume>=0.1 And .Volume<=1
                    .Volume=.Volume-.1
                Endi
            Endwith
        Catch
        Endtry
    Endproc

    Procedure command9.Click
        Try
            With Thisform.obrowser.Document.getElementById("yvideo1")
                .muted=!.muted
            Endwith
        Catch
        Endtry
    Endproc

    Procedure command8.Click
        With Thisform.obrowser.Document.getElementById("yvideo1")
            .Controls=Iif(.Controls=.T.,.F.,.T.)
        Endwith
    Endproc

    Procedure command11.Click
        With Thisform.obrowser.Document.getElementById("yvideo1")
            .poster=Getpict()
        Endwith
    Endproc

    Procedure command12.Click
        cr=Chr(13)
        Try
            With Thisform.obrowser.Document.getElementById("yvideo1")

     text to thisform.edit1.value textmerge noshow
 -Video=<<.src>>
 -Poster=<<.poster>>
 -Duration=<<  Trans(.duration,'999999.99')>>  sec.
 -Widh  =<<trans(.Width)>> px
 -Height=<<Trans(.Height)>> px
           endtext

                Endwith
        Catch
        Endtry
    Endproc

    Procedure command13.Click
        Thisform.obrowser.Document.Script.playPause("")   &&executed in condition this script function must be the first in document object scripts
        Thisform.timer1.Enabled=.T.
    Endproc

    Procedure timer1.Timer
        With Thisform.obrowser.Document.getElementById("yvideo1")
 

Thisform.text1.Value=Trans[.currentTime(),"999999.99"]+"/"+;
Trans(.duration,"999999.99")+" Sec."
            If .ended=.T. Or .paused
                This.Enabled=.F.
            Endi
        Endwith
    Endproc

    Procedure command7.Click
        Local m.xvideo
        m.xvideo=Getfile('mp4')
        Thisform.yvid.Value=m.xvideo
    Endproc

    Procedure combo1.Click
        Thisform.yvid.Value=This.Value
    Endproc

    Procedure combo1.Init
        With This
            .AddItem("http://ie.microsoft.com/testdrive/ieblog/2011/nov/pp4_blog_demo.mp4")
            .AddItem("http://ie.microsoft.com/testdrive/Videos/BehindIE9AllAroundFast/video.mp4")
            .AddItem("http://www.broken-links.com/tests/media/BigBuck.m4v")
            .AddItem("http://unheardbeethoven.org/defunct/Fifth%20Symphony.mp3")
            .AddItem("http://www.symphozik.info/multi/beethoven/6.mp3")
            .AddItem("http://corpsyphonie.free.fr/documents/melodies/Nocturnes/Mozart_NocturneI_Soprano1.mp3")
            .ListIndex=1
            .Style=2
        Endwith
    Endproc

    Procedure yhelp.Click
        Local m.myvar
        TEXT to m.myvar noshow
Get a video or audio valid file on disc or chose in the library(combo), then create/fill the player button.
the code create by automation the video/audio player in the vfp browser (mandatory with emulation as ie11 to support
 the html5).
you can do these things:

-play/pause button the media.this i cannot make it by automation (play, pause dont work from vfp.it works  only from javascript !).i made a script in the navigated file and automate it from vfp.
-return informations from the media file(src,duration), the width/height of the media
-can adjust the volume + or - or mute
-can show /hide the controls.
-can change the poster (any image from disc or from the web)
-A timer measure the currentTime of the media and fills a textbox.
-this is the basics.CAn extend to advanced things....
On IE the media supported actually on html5 vide/audio : mp4,mp3 for sure.can try others (a message is shown on the control bar).

The duration information is well returned when media is loaded(click the button).

 ENDTEXT

        Messagebox(m.myvar,0+32+4096,"Summay help")

    Endproc
Enddefine
*
*-- EndDefine: yhtml5Player

*END CODE

 


HTML5 AUDIO &amp; VIDEO PLAYERS

*2*

*This code builds an html5 video and audio player embed in a vfp olebrowser
*its have all the controls recquired to play any  valid media (for IE11 mp4,mp3,...)
*can play,pause, seek , mute/adjust sound ,make a fullscreen (here in form area).

*can set a player  poster with any picture (local or web).
*can cut the titlebar or restore it...

*Can play any valid video files on disc or type a valid url in textbox.

*Begin code
Publi yform
yform=Newobject("yplayer")
yform.Show
Read Events
Return
*
Define Class yplayer As Form
    Height = 510
    Width = 748
    ShowWindow = 2
    ShowTips = .T.
    AutoCenter = .T.
    Caption = "                       Video/audio html5 player"
    BackColor = Rgb(0,0,0)
    Name = "Form1"

    Add Object obrowser As OleControl With ;
        oleclass="shell.explorer.2",;
        Top = 0, ;
        Left = 0, ;
        Height = 468, ;
        Width = 756, ;
        Anchor = 15, ;
        Name = "oBrowser"

    Add Object command1 As CommandButton With ;
        Top = 483, ;
        Left = 4, ;
        Height = 25, ;
        Width = 56, ;
        Anchor = 768, ;
        Caption = "....", ;
        MousePointer = 15, ;
        ToolTipText = "Any local  valid video or type on textbox (even web link)", ;
        SpecialEffect = 2, ;
        BackColor = Rgb(187,255,187), ;
        Name = "Command1"

    Add Object text1 As TextBox With ;
        FontBold = .T., ;
        FontSize = 10, ;
        Anchor = 768, ;
        BackStyle = 1, ;
        BorderStyle = 1, ;
        Height = 25, ;
        Left = 62, ;
        Top = 483, ;
        Width = 658, ;
        ForeColor = Rgb(255,255,255), ;
        BackColor = Rgb(0,0,0), ;
        Name = "Text1"


    Add Object command2 As CommandButton With ;
        Top = 482, ;
        Left = 721, ;
        Height = 25, ;
        Width = 25, ;
        Anchor = 768, ;
        Caption = "TB", ;
        MousePointer = 15, ;
        ToolTipText = "Form titlebar on/off", ;
        BackColor = Rgb(255,128,64), ;
        Name = "Command2"

    Procedure ybuild
        Lparameters lcfilename
        Local m.uu,m.poster
        m.uu=""
        If ! Inlist(Lower(Left(m.lcfilename,5)),"http","www.")
            m.uu="file:///"
        Endi

        Do Case
            Case Mod(Val(Substr(Time(),8,1) ),2)=0
                m.poster="http://www.spacetelescope.org/static/archives/images/screen/heic0602a.jpg"
            Otherwise
                m.poster="http://www.spacetelescope.org/static/archives/images/screen/potw1441a.jpg"
        Endcase

        Local m.myvar
        TEXT to m.myvar textmerge noshow
        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
        <html xmlns="http://www.w3.org/1999/xhtml">
          <head>
            <style>
              body {
                background: black;
                color:#CCCCCC;
              }
              div {
                float: left;
                border :1px solid #444444;
                padding:10px;
                margin: 10px;
                background:#3B3B3B;
                margin:auto;
                border: 2px solid gold;
                border-radius: 10px;
              }
            </style>
          </head>
          <body >
        <div  >
              <video id="video" src="<<m.uu>><<m.lcfilename>>" controls="true"  width="<<thisform.width-50>>" height="<<thisform.height-80>>"  poster="<<m.poster>>"   controls autoplay/>
            </div>
          </body>
        </html>
        ENDTEXT
        Local m.lcdest
        m.lcdest=Addbs(Sys(2023))+"yhtml5.html"
        Strtofile(m.myvar,m.lcdest)
        Thisform.obrowser.Navigate(m.lcdest)
    Endproc

    Procedure Resize
        Try
            With Thisform.obrowser.Document.getElementById("video")
                .Width=Thisform.Width-50
                .Height=Thisform.Height-80
            Endwith
        Catch
        Endtry
    Endproc


    Procedure Init
        Set Safe Off
    Endproc


    Procedure command1.Click
        Local m.lcfilename
        m.lcfilename=Getfile()        &&"https://media.html5media.info/video.mp4"   &&getfile("mp4")
        Thisform.text1.Value=m.lcfilename
        Thisform.ybuild(m.lcfilename)
    Endproc

    Procedure text1.RightClick
        This.Value=_Cliptext
    Endproc

    Procedure text1.Valid
        Thisform.ybuild(This.Value)
    Endproc

    Procedure command2.Click
        Thisform.TitleBar=Iif(Thisform.TitleBar=1,0,1)
        If Thisform.TitleBar=0
            Thisform.Height=Thisform.Height+30
        Else
            Thisform.Height=Thisform.Height-30
        Endi
    Endproc

    Procedure Destroy
        Clea Events
    Endproc

Enddefine
*
*-- EndDefine: yplayer

*endcode

 


Firefox have better look for video & audio objects.
Firefox have better look for video & audio objects.

Firefox have better look for video & audio objects.


*3*

*the fullscreen in the example above is limited to the form area.
*for a real fullscreen i prepared this example with the internet explorer application.
*can play any valid audio/video file local on disc or on the web.

*Begin code
Set Safe Off
Do ydeclare

Publi xurl
m.xurl=Getfile("mp4|wmv|[mp3|wav|avi|ogg|webm")
If Empty(m.xurl)
    Return .F.
Endi
w=800
h=600

=ybuild(m.xurl,w,h)

Inkey(3)
Return

Function ybuild
    Lparameters filename,w,h

    Local m.uu
    m.uu=""
    If ! Inlist(Lower(Left(filename,5)),"http","www.")
        m.uu="file:///"
    Endi

    Local m.myvar
    TEXT to m.myvar textmerge noshow
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <style>
      body {
        background: black;
        color:#CCCCCC;
      }
      div {
        float: left;
        border :1px solid #444444;
        padding:10px;
        margin: 10px;
        background:#3B3B3B;
        margin:auto;
        border: 2px solid gold;
        border-radius: 20px;
      }
    </style>
  </head>
  <body >
<div  >
      <video id="yvideo" src="<<m.uu>><<filename>>" controls="true"  width="<<w-50>>" height="<<h-50>>"  poster="file:///F:\150327.JPG"  controls autoplay/>
    </div>

  </body>
</html>
    ENDTEXT
    Local m.lcdest
    m.lcdest=Addbs(Sys(2023))+"yhtml5.html"
    Strtofile(m.myvar,m.lcdest)
    *thisform.oBrowser.navigate(m.lcdest)
    =ylaunch(m.lcdest,w,h)
Endfunc

Function ylaunch
    Lparameters url,w,h
    Local apie
    apie=Newobject("internetexplorer.application")
    With apie

         .silent=0  &&no dialogs
        .Navigate(url)
        *.fullscreen=0
        .menubar=0
        .Toolbar=0
        .StatusBar=0
        .Resizable=0
        .Width=w+10
        .Height=h+25
        .Top=50
        .Left=(Sysmetric(1)-.Width)/2
        SetWindowText(.HWnd,"yHTML player :"+m.xurl)
        bringwindowtotop(.HWnd)
        .Visible=.T.
    Endwith
    Inkey(1)
    oo=apie.Document.getElementById("yvideo").readyState
    If oo<4
        Messagebox("Invalid URL-readystate="+Trans(oo),0+32+4096,'readystate',600)
        apie.Quit
    Endi
Endfunc

Procedure ydeclare
    Declare Integer BringWindowToTop In user32 Integer
    Declare Integer SetWindowText In user32   Integer HWnd, String lpString
Endproc

*End code


HTML5 AUDIO &amp; VIDEO PLAYERS
HTML5 AUDIO &amp; VIDEO PLAYERS

*4* Playlists

*Infortunatly the html5 dont support the classic windows mediaplayer playlist (extension m3U)
It needs sophistication javascript JS file to make playlist of medias
can build playlist with a calculating all the media duration and a timer.
Warning: the medias gathered in a folder must be valid for html5 and IE(mp3,mp4 for sure maybe also webm,ogg...)
Also dont touch the seek bar to dont alter the timer interval (hide it).   


 

*5*An html5 audio player by automation from vfp.

*This code create an html5 audio player with DOM structures.Internet must be connected
*can point a local disc URl for any valid audio file also.
(emulation ie is recquired)

*Begin code
Declare Integer BringWindowToTop In user32 Integer
Declare Integer SetWindowText In user32   Integer HWnd, String lpString

Publi apie
apie=Newobject("internetexplorer.application")
With apie
    .Navigate("about:blank")
    .Toolbar=0
    .StatusBar=0
    .menubar=0
    .Resizable=0
    .Width=550
    .Height=90
    BringWindowToTop(.HWnd)
    .Visible=.T.
Endwith

With apie.Document
    .body.leftmargin=0
    .body.topmargin=0
    .body.Scroll="no"
    .bgcolor=0

    Inke(1)

    If !Vartype(yvideo)="O"
        yvideo=.createElement("audio")
        .body.appendChild(yvideo)
        With  yvideo
            .Id ="yvideo1"
            .autoPlay=.T.
            .Controls=.T.
        Endwith
    Endi

    With yvideo
        .src="http://unheardbeethoven.org/defunct/Fifth%20Symphony.mp3"
        Local m. xSRC
        m.xSRC=.src
        .Load(.src)
    Endwith
Endwith

SetWindowText[apie.HWnd,[yHTML5_audio_player : ] ;
+m.xSRC]

*End code

The video and audio html5 players can skinned with CSS codes.

The video and audio html5 players can skinned with CSS codes.


*6*  playList on an html5 audio player  from VFP
*This is an html5 audio player playing a playlist of media audio (on the web but can make it
*playing on the local disc).
*-(On the web internet must be connected).
*can build a cursor as made on form.load and by automation build the player(make it autoplay=.t.
*always because as shown above play and pause dont work for me from vfp).
*A timer do the job monitoring  the end of the media and then fires the follow.You can reset the *playlist from begining by the optionGroup if wanted.

*The currentTime and duration of each media are shown in textbox.


*Begin code

publi yform
yform=newObject("yhtml5audio")
yform.show
read events
return

*
Define Class yhtml5audio As Form

    BorderStyle = 0
    Height = 415
    Width = 815
    ShowWindow = 2
    ShowTips = .T.
    AutoCenter = .T.
    Caption = "HTML5 audio player playlist"
    MaxButton = .F.
    BackColor = Rgb(120,120,120)
    ybof = .F.
    Name = "Form1"

    Add Object grid1 As Grid With ;
        Anchor = 15, ;
        Height = 200, ;
        Left = -6, ;
        Top = 1, ;
        Width = 822, ;
    
 Themes = .F., ;
    HighlightStyle=2,;
        Name = "Grid1"
    Add Object olecontrol1 As OleControl With ;
       oleclass="shell.explorer.2",;
        Top = 232, ;
        Left = 41, ;
        Height = 90, ;
        Width = 685, ;
        Name = "Olecontrol1"

    Add Object timer1 As Timer With ;
        Top = 228, ;
        Left = 708, ;
        Height = 23, ;
        Width = 23, ;
        Enabled = .F., ;
        Interval = 1000, ;
        Name = "Timer1"

    Add Object timer2 As Timer With ;
        Top = 264, ;
        Left = 24, ;
        Height = 23, ;
        Width = 23, ;
        Enabled = .F., ;
        Interval = 1000, ;
        Name = "Timer2"

    Add Object edit1 As EditBox With ;
        FontName = "BATAVIA", ;
        Anchor = 768, ;
        BorderStyle = 0, ;
        Height = 73, ;
        Left = 4, ;
        ReadOnly = .T., ;
        ScrollBars = 0, ;
        Top = 329, ;
        Width = 759, ;
        ForeColor = Rgb(0,0,160), ;
        BackColor = Rgb(255,255,128), ;
        Name = "Edit1"

    Add Object text1 As TextBox With ;
        FontBold = .T., ;
        Height = 25, ;
        Left = 323, ;
        Top = 204, ;
        Visible = .F., ;
        Width = 121, ;
        ForeColor = Rgb(0,255,0), ;
        BackColor = Rgb(0,0,0), ;
        Name = "Text1"

    Add Object optiongroup1 As OptionGroup With ;
        AutoSize = .T., ;
        ButtonCount = 1, ;
        BackStyle = 0, ;
        Value = 1, ;
        Height = 27, ;
        Left = 744, ;
        Top = 252, ;
        Width = 61, ;
        Name = "Optiongroup1", ;
        Option1.BackStyle = 0, ;
        Option1.Caption = "Reset", ;
        Option1.Value = 1, ;
        Option1.Height = 17, ;
        Option1.Left = 5, ;
        Option1.MousePointer = 15, ;
        Option1.Top = 5, ;
        Option1.Width = 51, ;
        Option1.AutoSize = .T., ;
        Option1.ForeColor = Rgb(255,0,0), ;
        Option1.Name = "Option1"

    Add Object label1 As Label With ;
        AutoSize = .T., ;
        FontBold = .T., ;
        FontSize = 20, ;
        BackStyle = 0, ;
        Caption = "?", ;
        Height = 35, ;
        Left = 776, ;
        MousePointer = 15, ;
        Top = 342, ;
        Width = 19, ;
        ForeColor = Rgb(0,255,0), ;
        Name = "Label1"

    Procedure Destroy
        yaudio=Null
        Release yaudio
        Clea Events
    Endproc

    Procedure Load
        Crea Cursor ycurs (ytitle c(60), artist c(65),url c(250))
        Insert Into ycurs Values(;
            "Symphony No. 5 in C Minor, Op. 67 - I. Allegro con brio",;
            "Ludwig van Beethoven (Performed by Skidmore College Orchestra)",;
            "http://ie.microsoft.com/TEStdrive/HTML5/HTML5AudioXMLPlaylist/assets/audio/Musopen.Com Symphony No. 5 in C Minor, Op. 67 - I. Allegro con brio.mp3")


        Insert Into ycurs Values(;
            "Symphony No. 5 in C Minor, Op. 67 - II. Andante con moto",;
            "Ludwig van Beethoven (Performed by Skidmore College Orchestra)",;
            "http://ie.microsoft.com/TEStdrive/HTML5/HTML5AudioXMLPlaylist/assets/audio/Musopen.Com Symphony No. 5 in C Minor, Op. 67 - II. Andante con moto.mp3")


        Insert Into ycurs Values(;
            "Symphony No. 5 in C Minor, Op. 67 - III. Allegro",;
            "Ludwig van Beethoven (Performed by Skidmore College Orchestra)",;
            "http://ie.microsoft.com/TEStdrive/HTML5/HTML5AudioXMLPlaylist/assets/audio/Musopen.Com Symphony No. 5 in C Minor, Op. 67 - III. Allegro.mp3")


        Insert Into ycurs Values(;
            "Symphony No. 5 in C Minor, Op. 67 - IV. Allegro",;
            "Ludwig van Beethoven (Performed by Skidmore College Orchestra)",;
            "http://ie.microsoft.com/TEStdrive/HTML5/HTML5AudioXMLPlaylist/assets/audio/Musopen.Com Symphony No. 5 in C Minor, Op. 67 - IV. Allegro.mp3")


        Insert Into ycurs Values(;
            "Piano Concerto in A Minor, Op. 16 - I. Allegro molto moderato",;
            "Edvard Grieg (Performed by Skidmore College Orchestra)",;
            "http://ie.microsoft.com/TEStdrive/HTML5/HTML5AudioXMLPlaylist/assets/audio/Musopen.Com Piano Concerto in A Minor, Op. 16 - I. Allegro molto moderato.mp3")


        Insert Into ycurs Values(;
            "Piano Concerto in A Minor, Op. 16 - II. Adagio",;
            "Edvard Grieg (Performed by Skidmore College Orchestra)",;
            "http://ie.microsoft.com/TEStdrive/HTML5/HTML5AudioXMLPlaylist/assets/audio/Musopen.Com Piano Concerto in A Minor, Op. 16 - II. Adagio.mp3")

        Insert Into ycurs Values(;
            "Piano Concerto in A Minor, Op. 16 - III. Allegro moderato molto",;
            "Edvard Grieg (Performed by Skidmore College Orchestra)",;
            "http://ie.microsoft.com/TEStdrive/HTML5/HTML5AudioXMLPlaylist/assets/audio/Musopen.Com Piano Concerto in A Minor, Op. 16 - III. Allegro moderato molto.mp3")

        Sele ycurs
        *brow
        Locate

    Endproc

    Procedure Init
        With Thisform.grid1
            .RecordSource="ycurs"
            .RecordSourceType=1
            .column3.Visible=.F.
            .DeleteMark=.F.
            RecordMark=.T.
            .GridLines=0
            .ReadOnly=.T.
            .HeaderHeight=25
            For i=1 To 2
                .Columns(i).header1.BackColor =Rgb(0,0,0)
                .Columns(i).header1.ForeColor=Rgb(0,255,0)
                .Columns(i).header1.FontBold=.T.
                .Columns(i).header1.FontSize=16
            Endfor
            .SetAll("DynamicBackColor", ;
                "IIF(MOD(RECNO( ), 2)=0, RGB(255,255,255)            , RGB(210,205,198))", "Column")
            Locate
            .Refresh
        Endwith

        Publi yaudio
        Thisform.timer2.Enabled=.T.
    Endproc

    Procedure olecontrol1.Init
        This.Navigate("about:blank")
    Endproc

    Procedure timer1.Timer
        *thisform.olecontrol1.document.getElementbById("yaudio1")
        Thisform.grid1.SetFocus
        With yaudio
            If .currentTime()>=0.99*.duration  &&to prevent come back to 0 !
                Sele ycurs
                If !Eof()
                    If !Thisform.ybof=.T.
                        Skip
                    Else
                        Thisform.ybof=.F.
                    Endi
                Endi
                If ! Empty(url)
                    .src=url
                    Thisform.edit1.Value="URL="+.src
                    .Load(.src)
                Endi
            Endi
     
       Thisform.text1.Value=Trans[.currentTime(),"99999,.99"]+;
"/"+Trans[.duration,"99999.99"]+" sec"
        Endwith
        Thisform.grid1.SetFocus
    Endproc

    Procedure timer2.Timer
        Sele ycurs
        With Thisform.olecontrol1.Document
            .body.leftmargin=0
            .body.topmargin=0
            .body.Scroll="no"
            .body.oncontextmenu="return false;"
            .bgcolor=0

            yaudio=.createElement("audio")
            .body.appendChild(yaudio)
            With  yaudio
                .Id ="yaudio1"
                .Controls=.T.
                .autoPlay=.T.
                .src=url
                Thisform.edit1.Value="URL="+.src
                .Load(.src)
            Endwith
        Endwith
        Thisform.grid1.SetFocus
        Thisform.timer1.Enabled=.T.
        Thisform.text1.Visible=.T.
        This.Enabled=.F.
    Endproc

    Procedure optiongroup1.InteractiveChange
        Sele ycurs
        Thisform.ybof=.T.
        Locate
        Thisform.timer1.Reset()
    Endproc

    Procedure label1.Click
        Local m.myvar
        TEXT to m.myvar noshow
This is an html5 audio player playing a playlist of media audio (on the web but can make it
  playing on the local disc).
 -(On the web internet must be connected).
can build a cursor as made on form.load and by automation build the player(make it autoplay=.t.
always because as shown above play and pause dont work for me from vfp).
 A timer do the job monitoring  the end of the media and then fires the follow.You can reset the playlist    by the optionGroup if wanted.

The currentTime and duration of each media are shown in textbox.
        ENDTEXT
        Messagebox(m.myvar,0+32+4096,"summary help")
    Endproc


Enddefine
*
Enddefine yhtml5audio
*Endcode

 


Can do exactly same thing with video player (video instead audio tag)

Can do exactly same thing with video player (video instead audio tag)

Click on code to select [then copy] -click outside to deselect


*!*	*7* created on 17 of march 2017 - up^dated on 18 of march 2017.
*!*	a custom html5 audio player managing a playlist with some havascript scripts and vfp as overlapper.
*!*	get any folder containing mp3 sound media files.this gathers them as playlist and play them.
*!*	 as you see the IE11 html5 audio tag is not beautiful as Other navigators can do (Firefox) but it have all
*!*	-needed objects.
*!*	I enlarged the audio player width to see all its components otherwise its troncated.no solution to compact it
*!*	 in given width.
*!*	the playlsit is scrollable and the selected file (by user or by the code) plays.
*!*	a web image is displayed at the right and changed with a timer.
*!*	added a transition rotation effect on this image with any user hover event.
*!*	can build a project (add a config.fpw) and compile to exe but warning:
*!*	this exe must be emulated ( as well as vfp6.exe) in registry:
*!* see http://yousfi.over-blog.com/2015/01/who-said-that-vfp-ie-browser-died.html  ---	code *1*
*!* can also build a  video player with adapting this code.can customize...


Publi yform
yform=Newobject("yhtml5audioPlayer")
yform.Show
Read Events
*
Define Class yhtml5audioPlayer As Form
	BorderStyle = 0
	Height = 553
	Width = 919
	ShowWindow = 2
	ShowTips = .T.
	AutoCenter = .T.
	Caption = "Form1"
	Icon = "music.ico"
	BackColor = Rgb(0,0,0)
	Name = "Form1"

	Add Object olecontrol1 As OleControl With ;
		Oleclass="shell.explorer.2",;
		Top = 16, ;
		Left = -36, ;
		Height = 564, ;
		Width = 960, ;
		Anchor = 15, ;
		Name = "Olecontrol1"

	Add Object timer1 As Timer With ;
		Top = 24, ;
		Left = 852, ;
		Height = 23, ;
		Width = 23, ;
		Enabled = .F., ;
		Interval = 10000, ;
		Name = "Timer1"

	Add Object shape1 As Shape With ;
		Top = 1, ;
		Left = 7, ;
		Height = 13, ;
		Width = 40, ;
		Curvature = 5, ;
		MousePointer = 15, ;
		ToolTipText = "Change folder", ;
		BackColor = Rgb(128,255,0), ;
		BorderColor = Rgb(255,0,0), ;
		Name = "Shape1"

	Add Object label1 As Label With ;
		FontBold = .T.,;
		FontSize = 10,;
		BackStyle = 0,;
		Caption = "",;
		Height = 13,;
		Left = 576,;
		Top = 0,;
		Width = 349,;
		ForeColor = Rgb(0,255,0),;
		Name = "Label1"

	Procedure ybuild
	If File("ymemo.mem")
		Resto From ymemo.mem AddI
	Else
		m.yrep=""
	Endi
	m.yrep=GetD(m.yrep,"get music mp3  folder","fill musics",32)
	If Empty(m.yrep)
		Return .F.
	Endi
	m.yrep=Addbs(m.yrep)
	Local m.gnbre,m.xx,m.ymedia
	m.gnbre=Adir(gabase,m.yrep+"*.mp3")
	If m.gnbre=0
		Messagebox("no media  in "+m.yrep,16+4096,"",1200)
		Return .F.
	Endi
	Save All Like yrep* To ymemo.mem
	m.ymedia=m.yrep+gabase(1,1)

	Sele ycurs
	Locate

	Local xfonds
	m.xfonds="http://images.all-free-download.com/images/graphiclarge/vector_islamic_greeting_card_template_for_ramadan_and_eid_ul_fitar_567997.jpg"

	m.xx=[<div style="width:100%;padding:10px;"><table><tr><td style="padding:20px;"><ul id="playlist" style="margin-top:0px;width:400px;background-image:url(']+m.xfonds+['); background-size:cover;">]
	For i=1 To gnbre
		m.xx=m.xx+[<li class="active"><a href=']+Strtran(m.yrep,"\","/")+gabase(i,1)+"'>"+Juststem(gabase(i,1))+'</a></li>'+Chr(13)
	Endfor
	m.xx=m.xx+"</ul>"+Chr(13)
	m.xx=m.xx+[</td><td style="vertical-align: top;padding:20px;"><img id="yimg" src="]+Allt(url)+[" style="padding=10px;height:]+Trans(Thisform.Height)+[px;width:98% ;" ></tr></table></div>]+Chr(13)
	Thisform.Caption=Trans(gnbre)+" medias in playlist of "+m.yrep

	Local m.myvar
	TEXT to m.myvar textmerge noshow

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.js"></script>
<link rel="stylesheet" type="text/css" href="http://fiddle.jshell.net/css/normalize.css">
<link rel="stylesheet" type="text/css" href="http://fiddle.jshell.net/css/result-light.css">

<style type="text/css">
html, body { max-width: 100%;overflow-x: hidden;background-color:#666;background:url("https://s-media-cache-ak0.pinimg.com/originals/e1/a0/ef/e1a0ef685ab2c885a3b837db6f6ebd6d.gif")  ;  }
#playlist{height:<<thisform.height-40>>px;}
#playlist ,audio{background:#666;width:100%;padding:0px;margin-top=0px;margin-left:20px; overflow-y: scroll;margin-top=5px;}
.active a{color:#5DB0E6;text-decoration:none;}
li a{color:#eeeedd;background:#333;padding:10px;display:block;font-size:12px;line-height:0.5;margin-left:0px;}
li a:hover{text-decoration:none;}
img {
-webkit-transition: width 2s, height 2s, -webkit-transform 2s; /* Safari */
transition: width 2s, height 2s, transform 2s;}
img:hover {
-webkit-transform: rotate(180deg); /* Safari */
transform: rotate(180deg);}

#playlist{
scrollbar-face-color: blue;
scrollbar-highlight-color: #000000;
scrollbar-shadow-color: #ffffff;
scrollbar-3dlight-color: #ffffff;
scrollbar-arrow-color: red;
scrollbar-track-color: #A0FFA0;
scrollbar-darkshadow-color: #000000;
}
</style>

<title>HTML5 Audio with variable playlist </title>

<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
var audio;
var playlist;
var tracks;
var current;

init();
function init(){
current = 0;
audio = $('audio');
playlist = $('#playlist');
tracks = playlist.find('li a');
len = tracks.length - 1;
audio[0].volume = .50;
playlist.find('a').click(function(e){
	e.preventDefault();
	link = $(this);
	current = link.parent().index();
	run(link, audio[0]);
});
audio[0].addEventListener('ended',function(e){
	current++;
	if(current == len){
		current = 0;
		link = playlist.find('a')[0];
	}else{
		link = playlist.find('a')[current];
	}
	run($(link),audio[0]);
});
}
function run(link, player){
	player.src = link.attr('href');
	par = link.parent();
   ytitle.innerText="-Current:"+player.src ;
	par.addClass('active').siblings().removeClass('active');
	audio[0].load();
	audio[0].play();
}
});//]]>

</script>

</head>
<body  scroll="no">
  <audio id="audio" controls autoplay preload="auto" tabindex="0" controls="true"  type="audio/mpeg" >
	<source type="audio/mp3" src="<<strtran(m.ymedia,"\","/")>>" >
	Sorry, your browser does not support HTML5 audio.
</audio>
<h3 id="ytitle" style="margin-left:50px;color:yellow;font-size:12px;"><h3>
<<m.xx>>
<script>
// tell the embed parent frame the height of the content
if (window.parent && window.parent.parent){
window.parent.parent.postMessage(["resultsFrame", {
  height: document.body.getBoundingClientRect().height,
  slug: "vkMqR"
}], "*")
}
</script>
</body>
</html>
	ENDTEXT
	Local m.lcdest
	m.lcdest=Addbs(Sys(2023))+"ytemp.html"
	Strtofile(m.myvar,m.lcdest)
	Thisform.olecontrol1.Navigate(m.lcdest)
	Thisform.timer1.Enabled=.T.
	Thisform.WindowState=2
	Endproc

	Procedure Init
	Set Defa To Addbs(Justpath(Sys(16,1)))
	Set Date Long
	Local dd
	m.dd=Ttoc(Datetime())
	Thisform.label1.Caption=Substr(m.dd,1,Len(m.dd)-3)
	Publi m.yrep
	Thisform.ybuild()
	Endproc

	Procedure Destroy
	Try
		Set Defa To Addbs(Justpath(Sys(1271,This)))
		m.yrep=Null
		Release m.yrep
		yform=Null
		Release yform
	Catch
	Endtry
	Clea Events
	Endproc

	Procedure Load
	Create Cursor ycurs (url c(254))
	Set Memowidth To 8192
	Local m.myvar
	TEXT to m.myvar noshow  &&set web media (or dsc ones) here.
	http://quartz.themegasm.net/wp-content/uploads/2016/04/photo-1434064511983-18c6dae20ed5.jpg
	http://quartz.themegasm.net/wp-content/uploads/revslider/notgeneric/iceberg.jpg
	https://pbs.twimg.com/media/B1eMOuRIYAALIcU.jpg
	http://www.tsvoyages.com/images/2015/02/6995933-desert-oasis-libya-1250x703.jpg
	http://blauekamel.com/images/com_fwgallery/files/43/taghit-01.JPG
	http://intymag.com/wp-content/uploads/2016/03/mon-weekend-%C3%A0-taghit-e1458230519606.jpg
	http://www.vitaminedz.org/photos/118/118859-photos-taghit-palmeraie-et-dunes-dorees-novembre-2006.jpg
	http://www.vitaminedz.com/photos/19/19939-taghit-l-enchanteresse-ou-carrement-l-nvoutante.jpg
	https://s-media-cache-ak0.pinimg.com/originals/31/7f/e8/317fe8b6f51e0f58ebda83f70fb77a8f.jpg
	https://upload.wikimedia.org/wikipedia/commons/thumb/f/fd/Vue_de_Taghit.jpg/280px-Vue_de_Taghit.jpg
	http://www.algerie-focus.com/wp-content/uploads/2014/12/B%C3%A9char-Taghit_20-d%C3%A9cembre-2014.jpg
	http://www.alger-culture.com/images/news/Kseur%20taghit.jpg
	http://p2.storage.canalblog.com/20/24/763987/55549657.jpg
	https://s-media-cache-ak0.pinimg.com/564x/1b/91/b4/1b91b48c267ff3cba9e548b227b5c5d2.jpg
	ENDTEXT
	For i=1 To Memlines(m.myvar)
		Insert Into ycurs Values (Allt(Mline(m.myvar,i)))
	Endfor
	Sele ycurs
*brow
	Locate
	Endproc

	Procedure olecontrol1.Init
	This.silent=.T.
	Endproc

	Procedure timer1.Timer
	Local dd
	m.dd=Ttoc(Datetime())
	Thisform.label1.Caption=Substr(m.dd,1,Len(m.dd)-3)
	Sele ycurs
	Try
		Skip
	Catch
		Locate
	Endtry

	If Empty(url)
		Locate
	Endi

	Try
		Thisform.olecontrol1.Document.getElementById("yimg").src=Allt(url)
	Catch
	Endtry
	Endproc

	Procedure shape1.Click
	Thisform.ybuild()
	Endproc

Enddefine
*
*-- EndDefine: yhtml5audioPlayer


Note: if the mp3 file of the playlist is not availbale the player is blocked.unblock it manually.can customize...
Note: if the mp3 file of the playlist is not availbale the player is blocked.unblock it manually.can customize...
Note: if the mp3 file of the playlist is not availbale the player is blocked.unblock it manually.can customize...

Note: if the mp3 file of the playlist is not availbale the player is blocked.unblock it manually.can customize...

To be informed of the latest articles, subscribe:
Comment on this post
B
This was a really great contest and hopefully, I can attend the next one. It was a lot of fun and I really enjoyed myself.
Reply
B
Awesome blog! Is your theme custom made or did you download it from somewhere? A design like yours with a few simple adjustements would really make my blog shine. Please let me know where you got your theme.
Reply
I
I think this is among the most significant information for me. And i'm glad reading your article. But want to remark on some general things, The web site style is wonderful, the articles is really excellent :
Reply
D
This is a really nice collection. Many thanks for gathering them all together for us. I’ve got a couple in mind for my next project.
Reply
W
Nice post and thanks for writing such a good article. Your tips are helpful. This content is so valuable and surely unique that people are happy and really helpful for them. there is no any other ways to get custom...
Reply
W
Thank you so much for this content... this really so helpful information for beginners... Keep sharing ...
Reply
B
Hii... Your post is really so good and helpful ... I learned so many things from you blog... it so beneficial for me... Waiting for the next one.. thank you so much
Reply