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
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.