Page 1 of 4

Embed JS into PureBasic

Posted: Thu Oct 08, 2015 6:16 pm
by JHPJHP

Re: HTML5 Video Player with jQuery

Posted: Fri Oct 09, 2015 5:12 pm
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.

Re: HTML5 Video Player with jQuery

Posted: Fri Oct 09, 2015 7:44 pm
by minimy
As all your posts, excellent!
Thanks JHP JHP!!

Re: HTML5 Video Player with jQuery

Posted: Sat Oct 10, 2015 8:53 am
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.

Re: HTML5 Video Player with jQuery

Posted: Sat Oct 10, 2015 12:24 pm
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

Re: HTML5 Video Player with jQuery

Posted: Sun Oct 11, 2015 2:26 pm
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

Re: HTML5 Video Player with jQuery

Posted: Sun Oct 11, 2015 4:06 pm
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

Re: HTML5 Video Player with jQuery

Posted: Sun Oct 11, 2015 4:25 pm
by juror
Wow - very impressive!

A full-screen option for the video would be a welcome addition :D

Re: HTML5 Video Player with jQuery

Posted: Sun Oct 11, 2015 5:43 pm
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

Re: HTML5 Video Player with jQuery

Posted: Mon Oct 12, 2015 4:27 am
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)

Re: HTML5 Video Player with jQuery

Posted: Mon Oct 12, 2015 8:15 am
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)

Re: HTML5 Video Player with jQuery

Posted: Mon Oct 12, 2015 9:38 am
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...

Re: HTML5 Video Player with jQuery

Posted: Mon Oct 12, 2015 9:57 am
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

Re: HTML5 Video Player with jQuery

Posted: Mon Oct 12, 2015 3:20 pm
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

Re: HTML5 Video Player with jQuery

Posted: Mon Oct 12, 2015 5:03 pm
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.