Transcript

00:07 hi this is ryan from wrap we are
00:09 classroom calm and i'd like to introduce
00:10 you to the html5 video stack from joe
00:13 hartmann the stack is used to display
00:15 and present video on your website and it
00:17 uses the html5 video player in any
00:20 browser that will accept that player now
00:22 for older browsers or browsers that do
00:24 not support html5 it will fall back to a
00:27 flash player so it's very flexible in
00:29 how it presents your video and all of
00:31 the adjustments are made through the
00:32 inspector hut in this stack you can see
00:35 how it looks here in edit mode and let's
00:36 jump into the inspector hut where we
00:38 will adjust our settings so first you
00:40 need to tell the stack where your video
00:42 is located and so in this instance I've
00:44 added a video file to my resources here
00:46 in rapidweaver now you need to be using
00:48 an h.264 compatible video and so I've
00:52 got an mp4 called overview mp4 and I'm
00:55 going to use the resource macro and
00:57 rapidweaver to link to that file you can
01:00 also host your file online and then put
01:03 the full URL to that file in that field
01:07 as well next we have a fuel for OGG
01:10 video this is the format that Firefox
01:13 uses for html5 so if you like Firefox to
01:16 display your video with an html5 player
01:18 you'll want to encode your video using
01:20 OGG and then also put a link to that
01:23 version of your video file in this field
01:26 otherwise Firefox will fall back to a
01:28 flash player to display your video you
01:31 will also need to know the settings of
01:33 width and height the dimensions of your
01:35 video so I'm going to set mine here
01:37 which is 546 by 308 and then finally we
01:41 have a few options available autoplay
01:42 which will do that as soon as the page
01:45 loads it will begin to play the video
01:46 loop will restart the video from the
01:50 beginning once it completes show
01:51 controls allows the user to hit play and
01:53 pause and adjust volume and the auto
01:56 buffer for longer videos can be helpful
01:58 to buffer the video before it begins to
02:01 play so that it will not pause in the
02:03 middle finally if you would like to add
02:05 a poster image this is a static image
02:07 that displays before the video is played
02:09 and this is useful if you're not using
02:11 autoplay selecting that
02:13 Shin places an image drop zone directly
02:16 into the stack so I'm going to take a
02:18 poster image that I've created and place
02:20 it right here so that is an overview of
02:23 all of the settings let's jump into
02:24 preview and you will see how this looks
02:26 as you can see the html5 player is
02:30 loaded here we can see the controls
02:31 which include play and pause and the
02:34 volume controls and I do not have it set
02:37 to auto place so at the time I am seeing
02:39 the poster image and then I would hit
02:41 play to load the video and begin and so
02:44 that is the html5 video stack from Joe
02:46 Ortman"}]