Embed JS into PureBasic
Embed JS into PureBasic
PureBasic Interface to OpenCV
PureBasic Interface to WinDivert
PureBasic Interface to WinRAR
PureBasic Interface to 7-Zip
PureBasic Interface to ImDisk
Windows Services & Other Stuff
Invading Space Aliens
Death Star vs Asteroids
GIF Toolkit
LSB Image Steganography
Spider Web Drawing
Deform Image: MLS
Video Snipping Tool
Chromium WebGadget
IAccessible Interface
Stitch Images: SIFT
OldSkool Fire Effect
Image Waves: LUT
YouTube Player & Downloader
MP4 Player & Downloader
Large Image Viewer
Barcode Generator
Google Translate Service
Embed JS into PureBasic
Geolocation: Google Maps
Book & Viewer & Magnify
Video for Windows: VfW
Alternate Console
Network Share Management
PureBasic Interface to WinDivert
PureBasic Interface to WinRAR
PureBasic Interface to 7-Zip
PureBasic Interface to ImDisk
Windows Services & Other Stuff
Invading Space Aliens
Death Star vs Asteroids
GIF Toolkit
LSB Image Steganography
Spider Web Drawing
Deform Image: MLS
Video Snipping Tool
Chromium WebGadget
IAccessible Interface
Stitch Images: SIFT
OldSkool Fire Effect
Image Waves: LUT
YouTube Player & Downloader
MP4 Player & Downloader
Large Image Viewer
Barcode Generator
Google Translate Service
Embed JS into PureBasic
Geolocation: Google Maps
Book & Viewer & Magnify
Video for Windows: VfW
Alternate Console
Network Share Management
Last edited by JHPJHP on Thu Jun 22, 2023 4:38 pm, edited 108 times in total.
Re: HTML5 Video Player with jQuery
Updated:
- renamed 1 example
-- VideoPlayer.pb to VideoPlayer_Custom.pb
- added 2 examples
-- VideoJSPlayer.pb
-- VideoPlayer.pb
When creating the example VideoJSPlayer.pb there was a problem with the VideoJS Framework taking too much control, to the point where I wasn't able to resize the video player programmatically. I worked this out by passing the script twice to the WebGadget, but this lead to an annoying flicker. I worked the flicker out by loading the second pass into a second WebGadget.
The second example VideoPlayer.pb is a product of testing I did to get the first example working. I noticed after removing the JavaScript and CSS references that the standard HTML5 video player worked without any additional coding.
- renamed 1 example
-- VideoPlayer.pb to VideoPlayer_Custom.pb
- added 2 examples
-- VideoJSPlayer.pb
-- VideoPlayer.pb
When creating the example VideoJSPlayer.pb there was a problem with the VideoJS Framework taking too much control, to the point where I wasn't able to resize the video player programmatically. I worked this out by passing the script twice to the WebGadget, but this lead to an annoying flicker. I worked the flicker out by loading the second pass into a second WebGadget.
The second example VideoPlayer.pb is a product of testing I did to get the first example working. I noticed after removing the JavaScript and CSS references that the standard HTML5 video player worked without any additional coding.
Last edited by JHPJHP on Wed Oct 14, 2015 10:24 pm, edited 5 times in total.
Re: HTML5 Video Player with jQuery
As all your posts, excellent!
Thanks JHP JHP!!
Thanks JHP JHP!!
If translation=Error: reply="Sorry, Im Spanish": Endif
Re: HTML5 Video Player with jQuery
Hi minimy,
Thank you for saying so, your comments are very much appreciated.
--------------------------------------------------
Awhile ago I had a job that required me to delve into some web-based programming, to prepare I familiarized myself with a few frameworks, one of them was Bootstrap...
I've added a new folder that includes a group of HTML templates showcasing some of the benefits Bootstrap provides. With its ability to seamlessly resize the contents of a page to fit the size of a window, should make it a good fit for this project.
All of the templates were started using the same format (Bootstrap/template.html), excluding a couple I'll get to shortly.
- some of the templates include jQuery and Bootstrap references that aren't needed, but were kept for easy expandability
Other templates:
- icons.html: a list of usable icons
- slidepush.html: a self-contained framework
I've also included a couple registry files that were needed to test some templates when using Google Chrome.
- http://chrisbitting.com/2014/03/04/allo ... e-windows/
NB*: The same techniques I used to incorporate a video player into a WebGadget can be applied to Bootstrap and other frameworks.
Thank you for saying so, your comments are very much appreciated.
--------------------------------------------------
Awhile ago I had a job that required me to delve into some web-based programming, to prepare I familiarized myself with a few frameworks, one of them was Bootstrap...
I've added a new folder that includes a group of HTML templates showcasing some of the benefits Bootstrap provides. With its ability to seamlessly resize the contents of a page to fit the size of a window, should make it a good fit for this project.
All of the templates were started using the same format (Bootstrap/template.html), excluding a couple I'll get to shortly.
- some of the templates include jQuery and Bootstrap references that aren't needed, but were kept for easy expandability
Other templates:
- icons.html: a list of usable icons
- slidepush.html: a self-contained framework
I've also included a couple registry files that were needed to test some templates when using Google Chrome.
- http://chrisbitting.com/2014/03/04/allo ... e-windows/
NB*: The same techniques I used to incorporate a video player into a WebGadget can be applied to Bootstrap and other frameworks.
Last edited by JHPJHP on Sat Oct 24, 2015 7:40 am, edited 1 time in total.
Re: HTML5 Video Player with jQuery
Hi JHPJHP,
this is brutally cool! Well, as pretty much all your projects here.
Stay healthy and happy and bring as much great projects as you can!
Bruno
this is brutally cool! Well, as pretty much all your projects here.
Stay healthy and happy and bring as much great projects as you can!
Bruno
Re: HTML5 Video Player with jQuery
Hi bbanelli,
Thank you for your kind words and good wishes, I hope the same for you.
-----------------------------------------------------------
Updated:
- added 1 example ( TurnJS )
-- TurnJSBook.pb, TurnJSBook_Create.pb
A full copy of the framework includes 5 samples, the one I'm currently demonstrating is the "double-page" sample.
One of the problems I faced was replacing the included images. It wasn't until I figured out that the images were tagged using an ADS (Alternate Data Streams), that I was able to move forward.
- [ZoneTransfer]ZoneId=3 (file downloaded from the Internet)
Instructions:
- create a new "Book" folder using the file TurnJSBook_Create.pb, pointing it to the folder TestFiles\FuturesEnd\
- next run the example TurnJSBook.pb pointing it at the newly created file TestFiles\Book1\FlipBook.div
Thank you for your kind words and good wishes, I hope the same for you.
-----------------------------------------------------------
Updated:
- added 1 example ( TurnJS )
-- TurnJSBook.pb, TurnJSBook_Create.pb
A full copy of the framework includes 5 samples, the one I'm currently demonstrating is the "double-page" sample.
One of the problems I faced was replacing the included images. It wasn't until I figured out that the images were tagged using an ADS (Alternate Data Streams), that I was able to move forward.
- [ZoneTransfer]ZoneId=3 (file downloaded from the Internet)
Instructions:
- create a new "Book" folder using the file TurnJSBook_Create.pb, pointing it to the folder TestFiles\FuturesEnd\
- next run the example TurnJSBook.pb pointing it at the newly created file TestFiles\Book1\FlipBook.div
Last edited by JHPJHP on Tue Oct 13, 2015 7:19 pm, edited 8 times in total.
Re: HTML5 Video Player with jQuery
Thanks JHPJHP... I follow your many projects closely.
JHPJHP - "The first part has been done, just run the example TurnJSBook.pb pointing it at the file Binaries\Book1\FlipBook.div"
I tried the 2 new files and I get a nice webpages with a "page turner", but no photos.
Just a blank webpage.
This happens with your Book1 sample folder and a new (Book2) created with TurnJSBook_Create.pb
I did right-click on the webpage to view the source code and it doesn't seem to be displayed properly.
Could this be the problem?
Win 10 Pro (5.40B9 x86)
Thanks again
JHPJHP - "The first part has been done, just run the example TurnJSBook.pb pointing it at the file Binaries\Book1\FlipBook.div"
I tried the 2 new files and I get a nice webpages with a "page turner", but no photos.
Just a blank webpage.
This happens with your Book1 sample folder and a new (Book2) created with TurnJSBook_Create.pb
I did right-click on the webpage to view the source code and it doesn't seem to be displayed properly.
Could this be the problem?
Win 10 Pro (5.40B9 x86)
Thanks again
- It was too lonely at the top.
System : PB 6.10 LTS (x64) and Win Pro 11 (x64)
Hardware: AMD Ryzen 9 5900X w/64 gigs Ram, AMD RX 6950 XT Graphics w/16gigs Mem
System : PB 6.10 LTS (x64) and Win Pro 11 (x64)
Hardware: AMD Ryzen 9 5900X w/64 gigs Ram, AMD RX 6950 XT Graphics w/16gigs Mem
Re: HTML5 Video Player with jQuery
Wow - very impressive!
A full-screen option for the video would be a welcome addition
A full-screen option for the video would be a welcome addition
Re: HTML5 Video Player with jQuery
Hi blueb,
Sorry that was my mistake, the file I created had a path local to my machine. I deleted the folder Binaries\Book1\images\ and added a new TestFiles folder, including formatting the source code.
- download the latest version of the package
- create a new "Book" folder using the file TurnJSBook_Create.pb, pointing it to the folder TestFiles\FuturesEnd\
- next run the example TurnJSBook.pb pointing it at the newly created file TestFiles\Book1\FlipBook.div
Please let me know if this resolves the problem.
- it may also be that the images weren't updated with the ADS: [ZoneTransfer]ZoneId=3 (file downloaded from the Internet)
I'll update my previous post removing the faulty instructions.
Thank you.
-----------------------------------------------------------------
Hi juror,
Thank you for your comments.
If I can find the time this weekend I'll modify one of the video player examples to display full screen.
-----------------------------------------------------------------
The TurnJS examples have been updated, formatted to better suit the comic. Currently the setting are static, but I plan on including an automated process to default some of these parameters.
- window width: 900, window height: 700
- comic width: 800, comic height: 600
Sorry that was my mistake, the file I created had a path local to my machine. I deleted the folder Binaries\Book1\images\ and added a new TestFiles folder, including formatting the source code.
- download the latest version of the package
- create a new "Book" folder using the file TurnJSBook_Create.pb, pointing it to the folder TestFiles\FuturesEnd\
- next run the example TurnJSBook.pb pointing it at the newly created file TestFiles\Book1\FlipBook.div
Please let me know if this resolves the problem.
- it may also be that the images weren't updated with the ADS: [ZoneTransfer]ZoneId=3 (file downloaded from the Internet)
I'll update my previous post removing the faulty instructions.
Thank you.
-----------------------------------------------------------------
Hi juror,
Thank you for your comments.
If I can find the time this weekend I'll modify one of the video player examples to display full screen.
-----------------------------------------------------------------
The TurnJS examples have been updated, formatted to better suit the comic. Currently the setting are static, but I plan on including an automated process to default some of these parameters.
- window width: 900, window height: 700
- comic width: 800, comic height: 600
Last edited by JHPJHP on Tue Oct 13, 2015 7:18 pm, edited 3 times in total.
- VB6_to_PBx
- Enthusiast
- Posts: 625
- Joined: Mon May 09, 2011 9:36 am
Re: HTML5 Video Player with jQuery
i can see or watch the oceans-clip.mp4 with only VideoJSPlayer2.pb file
only the file VideoJSPlayer2.pb works correctly on my Computer
Win7 64-Bit with PB5.31 32-Bit
i get .JS JavaScript Errors when trying to RUN these 2 .PB files below
and cannot see or watch the movie
VideoPlayer.pb
VideoJSPlayer1.pb
______________________________________________
1 more question :
How can i Open a .MP4 movie file on my Computer
instead of from the Internet ??
What Code is needed to modify VideoJSPlayer2.pb file
so that i can Open a .MP4 movie file on my Computer
instead of from the Internet ??
example:
VideoFile.s = "http://video-js.zencoder.com/oceans-clip.mp4"
VideoFolder.s = ReplaceString(GetCurrentDirectory(), "\", "/")
BuildPlayer(VideoFile, VideoFolder, 1.5)
only the file VideoJSPlayer2.pb works correctly on my Computer
Win7 64-Bit with PB5.31 32-Bit
i get .JS JavaScript Errors when trying to RUN these 2 .PB files below
and cannot see or watch the movie
VideoPlayer.pb
VideoJSPlayer1.pb
______________________________________________
1 more question :
How can i Open a .MP4 movie file on my Computer
instead of from the Internet ??
What Code is needed to modify VideoJSPlayer2.pb file
so that i can Open a .MP4 movie file on my Computer
instead of from the Internet ??
example:
VideoFile.s = "http://video-js.zencoder.com/oceans-clip.mp4"
VideoFolder.s = ReplaceString(GetCurrentDirectory(), "\", "/")
BuildPlayer(VideoFile, VideoFolder, 1.5)
PureBasic .... making tiny electrons do what you want !
"With every mistake we must surely be learning" - George Harrison
Re: HTML5 Video Player with jQuery
Hi VB6_to_PBx,
I've tested the examples on three computers without error, but that doesn't mean much in the world of Windows.
- Windows 10 x64, PureBasic 5.40 LTS Beta 10 (x86 / x64)
- Windows 10 x64, PureBasic 5.31 (x86 / x64)
- Windows 7 x64, PureBasic 5.31 (x86) - VMware
I've added a couple lines of code that may help, please download the latest version.
Playing local MP4 files (paths valid for latest build):
- set the path from the VideoFile.s variable (moon.mp4 included in the TestFiles folder)
- the size can be adjusted from the third parameter (1 = original size)
I've tested the examples on three computers without error, but that doesn't mean much in the world of Windows.
- Windows 10 x64, PureBasic 5.40 LTS Beta 10 (x86 / x64)
- Windows 10 x64, PureBasic 5.31 (x86 / x64)
- Windows 7 x64, PureBasic 5.31 (x86) - VMware
I've added a couple lines of code that may help, please download the latest version.
Code: Select all
SetGadgetAttribute(0, #PB_Web_BlockPopups, #True)
WebBrowser2.IWebBrowser2 = GetWindowLongPtr_(GadgetID(0), #GWL_USERDATA)
WebBrowser2\put_Silent(#True)
- set the path from the VideoFile.s variable (moon.mp4 included in the TestFiles folder)
- the size can be adjusted from the third parameter (1 = original size)
Code: Select all
VideoFile.s = GetCurrentDirectory() + "TestFiles\moon.mp4"
VideoFolder.s = ReplaceString(GetCurrentDirectory(), "\", "/")
BuildPlayer(VideoFile, VideoFolder, 1.5)
Last edited by JHPJHP on Sat Oct 17, 2015 12:06 pm, edited 3 times in total.
Re: HTML5 Video Player with jQuery
Hi,
Thanks, but...
I try to run them but always get an error on this line :
RegSetValueEx_(phkResult, lpValueName, 0, #REG_DWORD, @lpData, SizeOf(LONG))
I'm still on XP and using Opera...
Thanks, but...
I try to run them but always get an error on this line :
RegSetValueEx_(phkResult, lpValueName, 0, #REG_DWORD, @lpData, SizeOf(LONG))
I'm still on XP and using Opera...
Yeah I know, but keep in mind ... Leonardo da Vinci was also an autodidact.
Re: HTML5 Video Player with jQuery
Hi Joris,
I'm sorry to say that XP is not supported. It doesn't matter what browser you're using as the WebGadget uses the Internet Explorer ActiveX.
- http://www.purebasic.com/documentation/ ... adget.html
Open the following URL in Internet Explorer to see the results: http://html5test.com/
- in order to use an HTML5 video player the video element is needed
Open the following URL in Internet Explorer to see if the video plays: http://videojs.com/
- framework used in the examples
I'm sorry to say that XP is not supported. It doesn't matter what browser you're using as the WebGadget uses the Internet Explorer ActiveX.
- http://www.purebasic.com/documentation/ ... adget.html
Open the following URL in Internet Explorer to see the results: http://html5test.com/
- in order to use an HTML5 video player the video element is needed
Open the following URL in Internet Explorer to see if the video plays: http://videojs.com/
- framework used in the examples
Last edited by JHPJHP on Sat Oct 17, 2015 12:07 pm, edited 2 times in total.
- VB6_to_PBx
- Enthusiast
- Posts: 625
- Joined: Mon May 09, 2011 9:36 am
Re: HTML5 Video Player with jQuery
all 3 now work on my same computer, as far as watching the Internet file= "http://video-js.zencoder.com/oceans-clip.mp4"Hi VB6_to_PBx,
Ive tested the examples on three computers without error, but that doesn't mean much in the world of Windows.
VideoPlayer.pb
VideoJSPlayer1.pb
VideoJSPlayer2.pb
but for VideoPlayer.pb
i can watch the Internet file= "http://video-js.zencoder.com/oceans-clip.mp4" OK ,
and can browse my computers directories for .MP4 files
but cannot actually Open or Load or watch a .MP4 file on my Computer
the VideoPlayer shows a white blank area where the .MP4 video should appear
i'm not getting any JavaScript errors
but cannot watch a .MP4 file from my Computer
PureBasic .... making tiny electrons do what you want !
"With every mistake we must surely be learning" - George Harrison
Re: HTML5 Video Player with jQuery
Hi VB6_to_PBx,
I believe by what you described with a white background displayed in place of the video is because the MP4 Codec version is not supported.
- http://www.w3schools.com/tags/tag_video.asp
To confirm this I've updated the code to include a response when the canPlayType method returns "not supported".
- http://www.w3schools.com/tags/av_met_canplaytype.asp
Can you also try loading the MP4 video I've included with the package, it's located in the TestFiles folder.
I believe by what you described with a white background displayed in place of the video is because the MP4 Codec version is not supported.
- http://www.w3schools.com/tags/tag_video.asp
To confirm this I've updated the code to include a response when the canPlayType method returns "not supported".
- http://www.w3schools.com/tags/av_met_canplaytype.asp
Can you also try loading the MP4 video I've included with the package, it's located in the TestFiles folder.
Last edited by JHPJHP on Tue Oct 13, 2015 7:21 pm, edited 1 time in total.