Dreamweaver+Flash+Photoshop网页设计从入门到精通（微课精编版）
上QQ阅读APP看书，第一时间看更新
上一章目录下一章

3.10 案例实战：插入HTML5视频

视频讲解

在HTML5中，使用新增的<video>标记可以播放视频文件或视频流，它支持Ogg、MPEG-4、WebM等视频格式，其用法如下。

     <video src="samplemovie.mp4" controls="controls"></video>

其中，src属性用于指定要播放的视频文件，controls属性用于提供播放、暂停和音量控件，也可以包含宽度和高度属性。

如果浏览器不支持<video>标记，则可以在<video>与</video>之间插入一段替换内容，这样旧的浏览器就可以显示这些信息。例如：

     <video src=" samplemovie.mp4" controls="controls">
     您的浏览器不支持video标签。
     </video>

下面通过一个完整的示例来演示如何在页面内播放视频。

【操作步骤】

第1步，启动Dreamweaver CC，打开本小节备用练习文档test.html，另存为test1.html。

第2步，在编辑窗口中，将光标定位在要插入插件的位置。

第3步，选择【插入】|【媒体】|【HTML5 Video】命令，在编辑窗口中插入一个视频插件图标，如图3.36所示。

图3.36 插入HTML5视频插件

第4步，在编辑窗口中选中插入的视频插件，然后可以在属性面板中设置相关的播放属性和播放内容，如图3.37所示。

图3.37 设置HTML5视频属性

☑ 【ID】文本框：定义HTML5视频的ID值，以便脚本进行访问和控制。

☑ 【Class】下拉列表：设置HTML5视频控件的类样式。

☑ 【源】、【Alt源1】和【Alt源2】文本框：在【源】文本框中输入视频文件的位置。或者单击【选择文件】按钮以从计算机中选择视频文件。

对视频格式的支持在不同浏览器有所不同。如果源中的视频格式不被支持，则会使用【Alt源1】和【Alt源2】文本框中指定的格式，浏览器选择第一个可识别格式来显示视频。

建议使用多重选择，当从文件夹中为同一视频选择3个视频格式时，列表中的第一个格式将用于“源”。列表中下列的格式用于自动填写“Alt源1”和“Alt源2”。

☑ 【W】和【H】文本框：设置视频的宽度和高度，单位为像素。

☑ 【Poster】文本框：输入要在视频完成下载后或用户单击“播放”后显示的图像海报的位置。当插入图像时，宽度和高度值是自动填充的。

☑ 【Controls】复选框：设置是否在页面中显示播放控件。

☑ 【Autoplay】复选框：设置是否在页面加载后自动播放音频。

☑ 【Loop】复选框：设置是否循环播放音频。

☑ 【Muted】复选框：设置是否静音。

☑ 【Preload】下拉列表：预加载选项。选择auto选项，则会在页面下载时加载整个视频文件；选择metadata选项，则会在页面下载完成之后仅下载元数据；选择none选项，则不进行预加载。

☑ 【Title】文本框：为视频文件输入标题。

☑ 【回退文本】文本框：输入在不支持HTML5的浏览器中显示的文本。

☑ 【Flash回退】文本框：对于不支持HTML5视频的浏览器选择SWF文件。

第5步，按图3.37所示进行设置：显示播放控件，自动播放，允许提前预加载，鼠标指针经过时的提示标题为“播放volcano.mp4”，回退文本为“当前浏览器不支持HTML5视频”，视频宽度为414像素，高度为292像素。然后切换到【代码】视图，可以看到生成以下的代码：

     <video width="414" height="292" title="播放volcano.mp4" preload="auto" controls autoplay >
         <source src="medias/volcano.mp4" type="video/mp4">
         <p>当前浏览器不支持HTML5视频</p>
     </video>

第6步，保存页面，按F12键在浏览器中预览，显示效果如图3.38所示。

图3.38 播放HTML5视频

提示：在<audio>标记或<video>标记中指定controls属性可以在页面上以默认方式进行播放控制。如果不加这个特性，那么在播放时就不会显示控制界面。如果播放的是音频，那么页面上任何信息都不会出现，因为音频元素的唯一可视化信息就是对应的控制界面。如果播放的是视频，那么视频内容会显示。即使不添加controls属性也不会影响页面的正常显示。

【拓展】

有一种方法可以让没有controls特性的音频或视频正常播放，那就是在<audio>标记或<video>标记中设置另一个属性autoplay。

     <video autoplay>
         <source src="medias/volcano.ogg" type="video/ogg">
         <source src="medias/volcano.mp4" type="video/mp4">
     您的浏览器不支持video标签。
     </video >

通过设置autoplay属性，不需要任何用户交互，音频或视频文件就会在加载完成后自动播放。不过大部分用户对这种方式会比较反感，所以应慎用autoplay。在无任何提示的情况下，播放一段音频通常有两种用途，第一种是用来制造背景氛围，第二种是强制用户接收广告。这种方式的问题在于会干扰用户本机播放的其他音频，尤其会给依赖屏幕阅读功能进行Web内容导航的用户带来不便。

如果内置的控件不适应用户界面的布局，或者希望使用默认控件中没有的条件或者动作来控制音频或视频文件，那么可以借助一些内置的JavaScript函数和属性来实现，简单说明如下。

☑ load()：该函数可以加载音频或者视频文件，为播放做准备。通常情况下不必调用，除非是动态生成的元素。用来在播放前预加载。

☑ play()：该函数可以加载并播放音频或视频文件，除非音频或视频文件已经暂停在其他位，否则默认从开头播放。

☑ pause()：该函数暂停处于播放状态的音频或视频文件。

☑ canPlayType (type)：该函数检测<video>标记是否支持给定MIME类型的文件。

canPlayType (type)函数有一个特殊的用途：向动态创建的<video>标记中传入某段视频的MIME类型后，仅仅通过一行脚本语句即可获得当前浏览器对相关视频类型的支持情况。

【示例】下面示例演示了如何通过在视频上移动鼠标指针来触发play和pause功能。页面包含多个视频，且由用户来选择播放某个视频时，这个功能就非常适用。如在用户鼠标指针移到某个视频上时，播放简短的视频预览片段，用户单击后，播放完整的视频。具体演示代码如下所示。

     <video id="movies" onmouseover="this.play()" onmouseout="this.pause()" autobuffer="true"
         width="400px" height="300px">
         <source src="medias/volcano.ogv" type='video/ogg; codecs="theora, vorbis"'>
         <source src="medias/volcano.mp4" type='video/mp4'>
     </video>

上面的代码在浏览器中预览，显示效果如图3.39所示。

图3.39 使用鼠标控制视频播放

上一章目录下一章