Embed JS into PureBasic

Share your advanced PureBasic knowledge/code with the community.
JHPJHP
Addict
Addict
Posts: 2129
Joined: Sat Oct 09, 2010 3:47 am
Contact:

Re: HTML5 Video Player with jQuery

Post by JHPJHP »

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.
Last edited by JHPJHP on Wed Oct 14, 2015 10:24 pm, edited 5 times in total.
User avatar
minimy
Enthusiast
Enthusiast
Posts: 336
Joined: Mon Jul 08, 2013 8:43 pm

Re: HTML5 Video Player with jQuery

Post by minimy »

As all your posts, excellent!
Thanks JHP JHP!!
If translation=Error: reply="Sorry, Im Spanish": Endif
JHPJHP
Addict
Addict
Posts: 2129
Joined: Sat Oct 09, 2010 3:47 am
Contact:

Re: HTML5 Video Player with jQuery

Post by JHPJHP »

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.
Last edited by JHPJHP on Sat Oct 24, 2015 7:40 am, edited 1 time in total.
User avatar
bbanelli
Enthusiast
Enthusiast
Posts: 543
Joined: Tue May 28, 2013 10:51 pm
Location: Europe
Contact:

Re: HTML5 Video Player with jQuery

Post by bbanelli »

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
"If you lie to the compiler, it will get its revenge."
Henry Spencer
https://www.pci-z.com/
JHPJHP
Addict
Addict
Posts: 2129
Joined: Sat Oct 09, 2010 3:47 am
Contact:

Re: HTML5 Video Player with jQuery

Post by JHPJHP »

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
Last edited by JHPJHP on Tue Oct 13, 2015 7:19 pm, edited 8 times in total.
User avatar
blueb
Addict
Addict
Posts: 1037
Joined: Sat Apr 26, 2003 2:15 pm
Location: Cuernavaca, Mexico

Re: HTML5 Video Player with jQuery

Post by blueb »

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
- It was too lonely at the top.

System : PB 6.10 Beta 7 (x64) and Win Pro 11 (x64)
Hardware: AMD Ryzen 9 5900X w/64 gigs Ram, AMD RX 6950 XT Graphics w/16gigs Mem
juror
Enthusiast
Enthusiast
Posts: 228
Joined: Mon Jul 09, 2007 4:47 pm
Location: Courthouse

Re: HTML5 Video Player with jQuery

Post by juror »

Wow - very impressive!

A full-screen option for the video would be a welcome addition :D
JHPJHP
Addict
Addict
Posts: 2129
Joined: Sat Oct 09, 2010 3:47 am
Contact:

Re: HTML5 Video Player with jQuery

Post by JHPJHP »

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
Last edited by JHPJHP on Tue Oct 13, 2015 7:18 pm, edited 3 times in total.
User avatar
VB6_to_PBx
Enthusiast
Enthusiast
Posts: 617
Joined: Mon May 09, 2011 9:36 am

Re: HTML5 Video Player with jQuery

Post by VB6_to_PBx »

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)
 
PureBasic .... making tiny electrons do what you want !

"With every mistake we must surely be learning" - George Harrison
JHPJHP
Addict
Addict
Posts: 2129
Joined: Sat Oct 09, 2010 3:47 am
Contact:

Re: HTML5 Video Player with jQuery

Post by JHPJHP »

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.

Code: Select all

SetGadgetAttribute(0, #PB_Web_BlockPopups, #True)
WebBrowser2.IWebBrowser2 = GetWindowLongPtr_(GadgetID(0), #GWL_USERDATA)
WebBrowser2\put_Silent(#True)
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)

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.
Joris
Addict
Addict
Posts: 885
Joined: Fri Oct 16, 2009 10:12 am
Location: BE

Re: HTML5 Video Player with jQuery

Post by Joris »

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...
Yeah I know, but keep in mind ... Leonardo da Vinci was also an autodidact.
JHPJHP
Addict
Addict
Posts: 2129
Joined: Sat Oct 09, 2010 3:47 am
Contact:

Re: HTML5 Video Player with jQuery

Post by JHPJHP »

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
Last edited by JHPJHP on Sat Oct 17, 2015 12:07 pm, edited 2 times in total.
User avatar
VB6_to_PBx
Enthusiast
Enthusiast
Posts: 617
Joined: Mon May 09, 2011 9:36 am

Re: HTML5 Video Player with jQuery

Post by VB6_to_PBx »

Hi VB6_to_PBx,

Ive tested the examples on three computers without error, but that doesn't mean much in the world of Windows.
all 3 now work on my same computer, as far as watching the Internet file= "http://video-js.zencoder.com/oceans-clip.mp4"
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
JHPJHP
Addict
Addict
Posts: 2129
Joined: Sat Oct 09, 2010 3:47 am
Contact:

Re: HTML5 Video Player with jQuery

Post by JHPJHP »

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.
Last edited by JHPJHP on Tue Oct 13, 2015 7:21 pm, edited 1 time in total.
Locked