PureBasic Forum

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

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 Image Steganography
Spider Web Drawing
Deform Image: MLS
Video Snipping Tool
Stitch Images: SIFT
Image Waves: LUT
YouTube Player & Downloader
MP4 Player & Downloader
Barcode Generator
Google Translate Service
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

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.

As all your posts, excellent!
Thanks JHP JHP!!

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.

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

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

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

Wow - very impressive!

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

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

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)

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

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

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

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.