It is currently Sun Aug 18, 2019 2:04 am

All times are UTC + 1 hour




Post new topic Reply to topic  [ 48 posts ]  Go to page 1, 2, 3, 4  Next
Author Message
 Post subject: Embed JS into PureBasic
PostPosted: Thu Oct 08, 2015 6:16 pm 
Offline
Addict
Addict
User avatar

Joined: Sat Oct 09, 2010 3:47 am
Posts: 1572
-----------------------------------------------------------------------------------

Download Embed JS into PureBasic from My PureBasic Stuff

-----------------------------------------------------------------------------------

Tricks 'n' Tips
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 File Embedding
Spider Web Drawing
Deform Image: MLS
Video Snipping Tool
Image Waves: LUT
HTML5 YouTube Player
HTML5 MP4 Player
Barcode Generator
Embed JS into PureBasic
Geolocation: Google Maps
Book & Viewer & Magnify
Video for Windows: VfW
Alternate Console
Network Share Management

-----------------------------------------------------------------------------------

Registry is temporarily modified to access HTML5: FEATURE_BROWSER_EMULATION.

-----------------------------------------------------------------------------------

EXAMPLES:
- AS3_Webcam.pb
- D3JS_StackedBars.pb
- Flot_PieChart.pb, Flot_RealTime.pb, Flot_Selection.pb, Flot_Series.pb, Flot_Stacking.pb, Flot_Threshold.pb
- PDFJS_Viewer.pb
- TurnJS_Create.pb, TurnJS_Double.pb
- VideoJS_Player.pb, VideoPlayer_Custom.pb

INCLUDED:
- as3_webcam.pbi
- d3js_stackedbars.pbi
- flot_piechart.pbi, flot_realtime.pbi, flot_selection.pbi, flot_series.pbi, flot_stacking.pbi, flot_threshold.pbi
- turnjs_double.pbi
- videojs_player.pbi, videoplayer_custom1.pbi, videoplayer_custom2.pbi

ActionScript 3 https://github.com/sshilko/jQuery-AS3-Webcam
- as3.webcam.js, jquery.webcam.js, sAS3Cam.swf

Data-Driven Documents https://d3js.org/
- d3.v3.min.js, stackedbars.css

Flot 0.8.3 http://www.flotcharts.org/
- jquery.flot.min.js, flot.css
- jquery.flot.pie.min.js, flot.pie.js, pie.css
- flot.realtime.js, realtime.css
- jquery.flot.selection.min.js, jquery.flot.time.min.js, flot.selection.js
- flot.series.js
- jquery.flot.stack.min.js, flot.stack.js
- jquery.flot.threshold.min.js, flot.threshold.js

PDF.js v2.0.943 https://mozilla.github.io/pdf.js/
- /web/, /build/, LICENSE

TurnJS (4th Release) http://www.turnjs.com/
- turn.min.js, turn.html4.min.js, scissor.min.js, double-page.css

VideoJS v5.0 http://videojs.com/
- video.js, video-js.css

jQuery http://jquery.com/
- jquery-1.8.3.min.js, jquery-1.11.2.js, jquery-2.1.4.min.js, jquery-ui.min.js (v.1.11.4), jquery-ui.min.css
- modernizr.2.5.3.min.js, style.css

_________________

I will be unreachable from the forum for an indefinite period; downloads moved to My PureBasic Stuff.
_________________


Last edited by JHPJHP on Thu Jun 06, 2019 7:05 am, edited 89 times in total.

Top
 Profile  
Reply with quote  
 Post subject: Re: HTML5 Video Player with jQuery
PostPosted: Fri Oct 09, 2015 5:12 pm 
Offline
Addict
Addict
User avatar

Joined: Sat Oct 09, 2010 3:47 am
Posts: 1572
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.

_________________

I will be unreachable from the forum for an indefinite period; downloads moved to My PureBasic Stuff.
_________________


Last edited by JHPJHP on Wed Oct 14, 2015 10:24 pm, edited 5 times in total.

Top
 Profile  
Reply with quote  
 Post subject: Re: HTML5 Video Player with jQuery
PostPosted: Fri Oct 09, 2015 7:44 pm 
Offline
Enthusiast
Enthusiast
User avatar

Joined: Mon Jul 08, 2013 8:43 pm
Posts: 232
As all your posts, excellent!
Thanks JHP JHP!!

_________________
If translation=Error: reply="Sorry, Im Spanish": Endif


Top
 Profile  
Reply with quote  
 Post subject: Re: HTML5 Video Player with jQuery
PostPosted: Sat Oct 10, 2015 8:53 am 
Offline
Addict
Addict
User avatar

Joined: Sat Oct 09, 2010 3:47 am
Posts: 1572
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/allow-local-file-access-in-chrome-windows/

NB*: The same techniques I used to incorporate a video player into a WebGadget can be applied to Bootstrap and other frameworks.

_________________

I will be unreachable from the forum for an indefinite period; downloads moved to My PureBasic Stuff.
_________________


Last edited by JHPJHP on Sat Oct 24, 2015 7:40 am, edited 1 time in total.

Top
 Profile  
Reply with quote  
 Post subject: Re: HTML5 Video Player with jQuery
PostPosted: Sat Oct 10, 2015 12:24 pm 
Offline
Enthusiast
Enthusiast
User avatar

Joined: Tue May 28, 2013 10:51 pm
Posts: 536
Location: Europe
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/


Top
 Profile  
Reply with quote  
 Post subject: Re: HTML5 Video Player with jQuery
PostPosted: Sun Oct 11, 2015 2:26 pm 
Offline
Addict
Addict
User avatar

Joined: Sat Oct 09, 2010 3:47 am
Posts: 1572
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

_________________

I will be unreachable from the forum for an indefinite period; downloads moved to My PureBasic Stuff.
_________________


Last edited by JHPJHP on Tue Oct 13, 2015 7:19 pm, edited 8 times in total.

Top
 Profile  
Reply with quote  
 Post subject: Re: HTML5 Video Player with jQuery
PostPosted: Sun Oct 11, 2015 4:06 pm 
Offline
Addict
Addict
User avatar

Joined: Sat Apr 26, 2003 2:15 pm
Posts: 818
Location: Cuernavaca, Mexico
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.


Top
 Profile  
Reply with quote  
 Post subject: Re: HTML5 Video Player with jQuery
PostPosted: Sun Oct 11, 2015 4:25 pm 
Offline
Enthusiast
Enthusiast

Joined: Mon Jul 09, 2007 4:47 pm
Posts: 214
Location: Courthouse
Wow - very impressive!

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


Top
 Profile  
Reply with quote  
 Post subject: Re: HTML5 Video Player with jQuery
PostPosted: Sun Oct 11, 2015 5:43 pm 
Offline
Addict
Addict
User avatar

Joined: Sat Oct 09, 2010 3:47 am
Posts: 1572
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

_________________

I will be unreachable from the forum for an indefinite period; downloads moved to My PureBasic Stuff.
_________________


Last edited by JHPJHP on Tue Oct 13, 2015 7:18 pm, edited 3 times in total.

Top
 Profile  
Reply with quote  
 Post subject: Re: HTML5 Video Player with jQuery
PostPosted: Mon Oct 12, 2015 4:27 am 
Offline
Enthusiast
Enthusiast
User avatar

Joined: Mon May 09, 2011 9:36 am
Posts: 449
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


Top
 Profile  
Reply with quote  
 Post subject: Re: HTML5 Video Player with jQuery
PostPosted: Mon Oct 12, 2015 8:15 am 
Offline
Addict
Addict
User avatar

Joined: Sat Oct 09, 2010 3:47 am
Posts: 1572
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:
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:
VideoFile.s = GetCurrentDirectory() + "TestFiles\moon.mp4"
VideoFolder.s = ReplaceString(GetCurrentDirectory(), "\", "/")
BuildPlayer(VideoFile, VideoFolder, 1.5)

_________________

I will be unreachable from the forum for an indefinite period; downloads moved to My PureBasic Stuff.
_________________


Last edited by JHPJHP on Sat Oct 17, 2015 12:06 pm, edited 3 times in total.

Top
 Profile  
Reply with quote  
 Post subject: Re: HTML5 Video Player with jQuery
PostPosted: Mon Oct 12, 2015 9:38 am 
Offline
Enthusiast
Enthusiast

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


Top
 Profile  
Reply with quote  
 Post subject: Re: HTML5 Video Player with jQuery
PostPosted: Mon Oct 12, 2015 9:57 am 
Offline
Addict
Addict
User avatar

Joined: Sat Oct 09, 2010 3:47 am
Posts: 1572
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/gadget/webgadget.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 will be unreachable from the forum for an indefinite period; downloads moved to My PureBasic Stuff.
_________________


Last edited by JHPJHP on Sat Oct 17, 2015 12:07 pm, edited 2 times in total.

Top
 Profile  
Reply with quote  
 Post subject: Re: HTML5 Video Player with jQuery
PostPosted: Mon Oct 12, 2015 3:20 pm 
Offline
Enthusiast
Enthusiast
User avatar

Joined: Mon May 09, 2011 9:36 am
Posts: 449
Quote:
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


Top
 Profile  
Reply with quote  
 Post subject: Re: HTML5 Video Player with jQuery
PostPosted: Mon Oct 12, 2015 5:03 pm 
Offline
Addict
Addict
User avatar

Joined: Sat Oct 09, 2010 3:47 am
Posts: 1572
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 will be unreachable from the forum for an indefinite period; downloads moved to My PureBasic Stuff.
_________________


Last edited by JHPJHP on Tue Oct 13, 2015 7:21 pm, edited 1 time in total.

Top
 Profile  
Reply with quote  
Display posts from previous:  Sort by  
Post new topic Reply to topic  [ 48 posts ]  Go to page 1, 2, 3, 4  Next

All times are UTC + 1 hour


Who is online

Users browsing this forum: No registered users and 5 guests


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum

Search for:
Jump to:  

 


Powered by phpBB © 2008 phpBB Group
subSilver+ theme by Canver Software, sponsor Sanal Modifiye