HTML5 AUDIO & VIDEO PLAYERS
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.
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).
*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
*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.
*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
*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.
*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
*
*Endcode
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...