任务10.3 网页中的视频文件的使用

模块10网页多媒体设计任务10.3网页中的视频文件的使用网页设计项目教程（HTML5+CSS3+JavaScript）任务描述▪本任务围绕网页中视频文件的应用展开，系统讲解video元素。▪基础属性：controls、autoplay、loop、preload，以及尺寸设置width/height。▪状态属性：networkState（网络加载状态）与readyState（就绪状态）。▪常用方法：play()、pause()、load()等；常用事件：play、pause、ended等。▪任务实施：设计并实现一个无默认控件的自定义视频播放器。相关知识和技能任务10.3涵盖以下核心知识点与综合实践：▪10.3.1添加视频文件▪10.3.2添加自动播放的视频文件▪10.3.3添加循环播放的视频文件▪10.3.4添加预播放的视频文件▪10.3.5设置视频文件的宽度和高度▪10.3.6设置networkState属性▪10.3.7设置readyState属性▪10.3.8常用方法和事件|任务实施10.3.1添加视频文件HTML5通过<video>元素提供标准视频播放方案，无需任何插件。MP4H.264编码；通用格式，所有现代浏览器均支持。WebMVP9编码；开源格式，Chrome/Firefox/Edge支持。Ogg逐步淘汰；兼容旧版Firefox/Opera。表10-2浏览器对video元素的支持情况主流浏览器对MP4与WebM两种视频格式的支持差异（书稿原表）。视频格式ChromeFirefoxSafariEdgeMP4支持支持支持支持WebM支持支持不支持支持注：正文提及Ogg作为“逐步淘汰”格式，但书稿原表10-2仅列出MP4与WebM两行；为遵循“不擅自扩充”要求，此处忠实保留原表，未补加Ogg行。实例代码10-4引入视频文件使用src属性指定视频URL；效果参见图10-4（无控制按钮）。<!DOCTYPEhtml><html><head><title>实例10-4</title></head><body><videosrc="./video/Scence.mp4">您的浏览器不支持video元素！</video></body></html>为视频添加controls控制条在video元素上添加controls属性，浏览器将展示自带控制工具。▪无controls：视频被引入但无“播放/暂停/最大化”等按钮，无法暂停或缩放（图10-4）。▪添加controls：视频底部出现原生控制条，含播放、暂停、音量调节、屏幕缩放等功能（图10-5）。▪结论：在HTML5中添加视频只需<video>元素+controls属性即可实现基本播放。10.3.2添加自动播放的视频文件autoplay提示浏览器在就绪后尝试自动播放，但受现代浏览器策略限制。▪autoplay（布尔）：请求浏览器在视频就绪后自动播放。▪浏览器策略：Chrome/Firefox/Safari通常禁止自动播放。▪例外条件：需同时添加muted（静音），或用户已与页面发生交互（点击/滚动）。▪否则即使设置autoplay，视频也可能无法自动播放（效果参见图10-6）。实例代码10-5自动播放视频文件controls+autoplay+muted组合，确保静音自动播放（效果参见图10-6）。<!DOCTYPEhtml><html><head><title>实例10-5</title></head><body><videosrc="./video/Scence.mp4"controlsautoplaymuted>您的浏览器不支持HTML5视频播放</video></body></html>10.3.3添加循环播放的视频文件loop属性让视频在播放结束后自动重新开始循环。▪loop（布尔）：音频或视频播放结束后自动循环播放。▪用法：在<video>标签中添加loop属性名即可启用。▪组合：可与controls、autoplay、muted一起使用。▪行为：播放到结尾立即跳回开头重新播放（效果参见图10-7）。实例代码10-6循环播放视频文件controls+loop+autoplay+muted组合（效果参见图10-7）。<!DOCTYPEhtml><html><head><title>实例10-6</title></head><body><videosrc="./video/Scence.mp4"controlsloopautoplaymuted>您的浏览器不支持video标签！</video></body></html>10.3.4添加预播放的视频文件preload向浏览器提供视频数据的预加载策略建议。▪作用：浏览器提前加载视频数据，播放时已完成缓冲，加快播放速度。▪互斥：若同时设置autoplay，浏览器优先执行自动播放，preload被忽略。▪取值：none/metadata/auto，默认值为auto。实例代码10-7预播放视频文件preload="auto"预加载整个视频（效果参见图10-8）。<!DOCTYPEhtml><html><head><title>实例10-7</title></head><body><videosrc="./video/Scence.mp4"controlspreload="auto">您的浏览器不支持video标签！</video></body></html>10.3.5设置视频文件的宽度和高度width/height设置播放器显示尺寸，默认单位为像素。▪单位：默认像素；也可显式声明其他单位，如width="50%"。▪不设置：浏览器按视频源固有尺寸显示播放器。▪源尺寸暂不可用：使用poster封面图尺寸作为初始显示尺寸。▪仅设其一：按视频源原始宽高比自动计算另一维，避免拉伸变形。实例代码10-8设置视频文件大小width="220"height="360"指定播放器尺寸（效果参见图10-9）。<!DOCTYPEhtml><html><head><title>实例10-8</title></head><body><videosrc="./video/Scence.mp4"controlswidth="220"height="360">您的浏览器不支持video标签！</video></body></html>10.3.6设置networkState属性networkState返回数字常量，表示当前网络加载状态。NETWORK_EMPTY(0)初始状态，尚未加载任何媒体资源。NETWORK_IDLE(1)已选定可用媒体源，但当前无活跃加载。NETWORK_LOADING(2)媒体数据正在加载中。NETWORK_NO_SOURCE(3)未找到任何受支持的编码格式，不执行加载。实例代码10-9显示networkState状态通过onloadstart/onprogress事件实时刷新状态文字。<!DOCTYPEhtml><html><head><title>实例10-9</title></head><body><videoid="myVideo"src="./video/Scence.mp4"controlswidth="220"height="360">您的浏览器不支持video标签！</video><p>网络状态：<spanid="state"></span></p><script>varvideo=document.getElementById("myVideo");varstateElement=document.getElementById("state");functiongetStateText(state){switch(state){case0:return"未加载资源(NETWORK_EMPTY)";case1:return"已就绪，未加载(NETWORK_IDLE)";case2:return"正在加载中(NETWORK_LOADING)";case3:return"无可用资源(NETWORK_NO_SOURCE)";default:return"未知状态";}}functionshowState(){stateElement.textContent=getStateText(workState)+"(数值："+workState+")";}showState();video.onloadstart=showState;video.onprogress=showState;</script></body></html>10.3.7设置readyState属性readyState返回当前播放位置的就绪状态，取值0~4。HAVE_NOTHING(0)没有媒体信息，当前位置无可播放数据。HAVE_METADATA(1)已有足够元数据，当前位置无有效数据。HAVE_CURRENT_DATA(2)当前位置有数据可播放，但无前进数据。HAVE_FUTURE_DATA(3)当前位置有数据，且获取到前进数据。HAVE_ENOUGH_DATA(4)数据充足，可连续播放至结束。实例代码10-10显示readyState状态通过onloadedmetadata/onprogress/onplaying事件刷新状态。<!DOCTYPEhtml><html><head><title>实例10-10</title></head><body><videoid="myVideo"src="./video/Scence.mp4"controlswidth="220"height="360">您的浏览器不支持video标签！</video><p>就绪状态：<spanid="readyState"></span></p><script>varvideo=document.getElementById("myVideo");varreadyStateElement=document.getElementById("readyState");functiongetReadyStateText(state){switch(state){case0:return"无数据(HAVE_NOTHING)";case1:return"有元数据(HAVE_METADATA)";case2:return"有当前数据(HAVE_CURRENT_DATA)";case3:return"有后续数据(HAVE_FUTURE_DATA)";case4:return"数据充足(HAVE_ENOUGH_DATA)";default:return"未知状态";}}functionshowReadyState(){readyStateElement.textContent=getReadyStateText(video.readyState)+"(数值："+video.readyState+")";}showReadyState();video.onloadedmetadata=showReadyState;video.onprogress=showReadyState;video.onplaying=showReadyState;</script></body></html>10.3.8多媒体元素常用方法和事件audio与video元素均可用JavaScript调用方法、绑定事件实现控制。方法描述addTextTrack()为媒体添加文本轨道（字幕、标题等）canPlayType()检测浏览器是否支持指定媒体类型load()重新加载音视频标签play()播放音视频pause()暂停播放当前的音视频常用方法（play/pause/load）与canPlayType()返回maybe/probably/空字符串三种结果；常用事件（play、pause、ended等）将在下页表10-4完整列出。表10-4多媒体元素常用事件audio/video元素在播放生命周期中产生的事件（完整22项）。事件描述abort加载被异常中止canplay可开始播放canplaythrough可播放到结束无须缓冲停止durationchange总时长改变emptied当前播放列表为空ended播放列表结束error加载媒体发生错误loadeddata加载媒体数据时loadedmetadata收到总时长、分辨率等metadataloadstart开始查找媒体数据pause媒体暂停事件描述play媒体播放playing从缓冲暂停恢复到播放progress获取到媒体数据时ratechange播放倍数改变seeked用户完成跳转seeking用户正执行跳转操作stalled试图获取数据但数据不可用suspend获取不到数据时timeupdate当前播放位置改变vo