Page 1 of 1

htmlVideoLoader

PostPosted: Wed Sep 17, 2014 3:51 pm
by Robert Stevenson
New to all this. tbName? Can this simply be the name of the page? srcMP4? Is this the name of the file on the local machine? Any direction would be so much appreciated.

Re: htmlVideoLoader

PostPosted: Wed Sep 17, 2014 5:49 pm
by Clifton
htmlVideoLoader() loads video clips inside of containers that you define. Generally containers are just simple field objects that define a position and occupy space on the page.

TRY THIS:
Draw a simple field on your page that defines the size and position of the video you want to play. Then name the field any unique name you want.

When setting up htmlVideoLoader(), set tbName to the name of the field you have created. The name is case-sensitive so it must match exactly the name of your field in order for the field to be used as the target container for you video.

As far as srcMP4, this is the relative path to the video in the exported content. So if the video will be put in a folder called videos, then the srcMP4 property would be set to "../videos/[Your video name].mp4". For server compatibility, you should generally name your videos without spaces and it is usually best to use small case characters, though this is not absolutely necessary.

The PowerPac does not add files to your exported content unless you flag the content for inclusion in the export using the DHTML Export Tree Manager ( PowerPac menu > Add Folders to Export Tree ).
To add your video to the export of your book:
  1. Create a folder in the same folder as your book directory called videos.
  2. Copy your mp4 file into that folder.
  3. Open the DHTML Export Tree Manager
  4. Click on the Root DHTML Folder Tree element in the folder list.
  5. Click Add Folder.
  6. Select the videos folder from your hard drive as the folder to include in the exported content and click OK.
  7. Click Done to exit the DHTML Export Tree Manager.
Now whenever the book is exported, the videos folder and all of its contents will be included in the content of your book. When htmlVideoLoader() is executed it will load the specified video in the field you drew and named previously.

You can monitor playback of your video to ensure that your students have viewed them before being allowed to move to the next page. When a video ends, htmlVideoLoader() can send a user event to the field that was used as the container to display the video (set the parameter notifyObject to true). You can then set up actions that enable next page controls/buttons, etc.

Re: htmlVideoLoader

PostPosted: Wed Sep 17, 2014 9:54 pm
by Robert Stevenson
Always so helpful! Appreciated. I'm off to give it a try.

Re: htmlVideoLoader

PostPosted: Thu Sep 18, 2014 11:35 am
by Robert Stevenson
I have added the mp4 clips to a "videos" directory but run into a syntax error when I add the srcMP4 path "C:\Working\INSTRUCT\Books\Sc9\2008unit2\Ch6\Symbols\videos\Movie1.mp4"

Re: htmlVideoLoader

PostPosted: Thu Sep 18, 2014 2:22 pm
by Clifton
srcMP4 is a path that is relative to your content folder, not an absolute path in on your hard drive. Your DHTML content knows nothing about paths on your hard drive. However you can use an absolute path to a file on a web server (e.g. "http://www.mywebsite.com/mypath/videos/Movie1.mp4"). Please also note that path commands must NEVER be separated by backslashes "\" when running web content. ALWAYS use "/" forward slashes. Forward slashes work in all situations.

The correct path in your case would likely be "../videos/Movie1.mp4" as shown below:

Image 2.png
Actions for field "VideoPlayer"
Image 2.png (23.23 KiB) Viewed 4265 times

If that doesn't work, then you may need to recheck if you have added the videos folder to your exported content using the DHTML Export Tree Manager. It should look like this:

Image 3.png
Adding videos folder to export tree (screen 1)
Image 3.png (198.57 KiB) Viewed 4265 times

Image 4.png
Completed view of videos folder added to tree (screen 2)
Image 4.png (94.99 KiB) Viewed 4265 times

Re: htmlVideoLoader

PostPosted: Thu Sep 18, 2014 6:10 pm
by Robert Stevenson
"videos" folder is in the tree of exported content and contains the named video ("Movie1.mp4") but so far on export all I get is the loading page. This is a one page "trial" book with the field on the page containing the AE "on open page" and the htmlVideoLoader set to autoplay and loop. Baffled for now but I'll take another look at your tutorials.

Re: htmlVideoLoader

PostPosted: Thu Sep 18, 2014 6:17 pm
by Clifton
I assuming you have it set up as described in this thread. There are a few other things to keep in mind.
  1. Some videos will not load unless played from a web server. This may especially be the case with IE.
  2. Try viewing the content in Firefox as it is much more forgiving with hard drive content.
  3. If you still have trouble, zip up the tbk and the mp4 file and email it to me and I will take a look.

Re: htmlVideoLoader

PostPosted: Thu Sep 18, 2014 9:52 pm
by Clifton
Also, in order for this function to perform in its intended form on MSIE, you should check Enable IE HTML 5 Display in the PowerPac menu. This enables all of the HTML 5 capabilities of modern browsers for use in your ToolBook content, and it exposes the video component for use by the PowerPac. You may still need to put your content on a web server to test it, especially if you are running content created by ToolBook versions < v10.0.

Many developers install XAMPP—a web server you can run from your local development computer—to make copying content to a web server for development testing much faster.
You can download the XAMPP web server a this location:
https://www.apachefriends.org/index.html
  • XAMPP pretty much just works right out of the box.
  • Just copy your ToolBook export to the folder htdocs which is the www location of the web server.
  • To view your content, point your browser to the url > http://localhost/[path to web export]/index.html
  • Now you can test your content in every browser that you need to support.

Re: htmlVideoLoader

PostPosted: Fri Sep 19, 2014 10:49 am
by Robert Stevenson
Tried all and finally gave in and sent you one page. I figure if I can get one movie to load the other 60 pages should come easy.

Re: htmlVideoLoader

PostPosted: Fri Sep 19, 2014 2:23 pm
by Clifton
Thank you for the source files.
Findings:
  1. I could not get the web content of the book to load with or without the PowerPac enabled.
    Turns out this is because it is a one page book that is set to be a randomized quiz book. Since there is no quiz in the book as of yet, the code hangs during launch. I unchecked the randomized quiz option and book loads fine.
    BTW: Randomized quizzes are handled much better using the PowerPac function gotoRandomPage(). You can randomize pages on-the-fly and customize which page ranges in the book get randomized. This is TRUE randomization, rather than launch-time randomization.
  2. The mp4 you are working with is not browser compatible. It is an mpeg4 video and the preferred mp4 container format supported in web browsers is h.263 or h.264. So I converted the video to h.264 and it plays perfectly.
    NOTE: You should make sure to export your videos to a supported format or convert them as needed. There are a number of free programs available for this purpose.
  3. For testing purposes, this video prefers to play from a web server. Some videos will not load when played from local file systems due to security limitations of modern browsers and their audio/video components.
To view the results:
http://www.pgsoftwaretools.com/powerpac/assessments/stevenson_splash_video