HTML5<video>

     最近做项目时用到了HTML5的<video>标签,遇到了一些问题,下面了解一下这个HTML5及<video>标签。

     【知识点】

     1、什么是 HTML5?

     HTML5 将成为 HTML、XHTML 以及 HTML DOM 的新标准。
     HTML 的上一个版本诞生于 1999 年。自从那以后,Web 世界已经经历了巨变。

     HTML5 仍处于完善之中。然而,大部分现代浏览器已经具备了某些 HTML5 支持。

     2、为 HTML5 建立的一些规则:
     新特性应该基于 HTML、CSS、DOM 以及 JavaScript。
     减少对外部插件的需求(比如 Flash)
     更优秀的错误处理
    更多取代脚本的标记
    HTML5 应该独立于设备
    开发进程应对公众透明

    3、新特性
     HTML5 中的一些有趣的新特性:
     用于绘画的 canvas 元素
     用于媒介回放的 video 和 audio 元素
     对本地离线存储的更好的支持
     新的特殊内容元素,比如 article、footer、header、nav、section
     新的表单控件,比如 calendar、date、time、email、url、search

     4、<video>应用

     Web 上的视频直到现在,仍然不存在一项旨在网页上显示视频的标准。今天,大多数视频是通过插件(比如 Flash)来显示的。然而,并非所有浏览器都拥有同样的插件。HTML5 规定了一种通过 video 元素来包含视频的标准方法。

     当前,video 元素支持三种视频格式:
     
     Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件
     MPEG4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件
     WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件

     

      我在项目中用这个标签遇到的问题就是,都是MP4格式的视频有的有声音和画面,有的只有声音没有画面,其实就是视频格式不符合HTML视频格式规范导致,MP4的视频编码格式也分很多种,<video>适应的MP4是 带有 H.264 视频编码和 AAC 音频编码的视频文件,用格式工厂的话设置如下:

     视频效果如下:

      【小结】

        <video>、<object>、<embed>都可以用于播放视频,而且属性非常容易设置,但是各有局限,<object>只适应IE,<video>对视频格式要求比较多,把各个标签的优点组合一下就好了。


### HTML5 `<video>` 和 `<audio>` 标签中 `<source>` 标签的功能和用法 #### 1. `<source>` 标签的主要作用 `<source>` 标签用于为 `<video>` 或 `<audio>` 元素提供多个媒体资源选项。它允许开发者针对不同的浏览器或设备指定不同格式的媒体文件,从而提高跨平台兼容性[^2]。 - **多格式支持**: 不同浏览器可能只支持某些特定类型的音频或视频格式(如 MP4、WebM、Ogg 等)。通过使用多个 `<source>` 标签,可以确保即使某个格式不被支持,仍然有备选方案可用。 - **自动选择最佳资源**: 浏览器会按照 `<source>` 标签的顺序尝试加载第一个能够识别和支持的媒体文件。 --- #### 2. `<source>` 标签的核心属性 以下是 `<source>` 标签常用的几个重要属性及其含义: - **`src`**: 指定媒体文件的实际 URL 地址。 - **`type`**: 声明媒体文件的 MIME 类型,例如 `video/mp4`, `audio/ogg` 等。这有助于浏览器提前判断是否能处理该文件而无需下载整个内容。 - **`media`**: 可选属性,用来定义适合播放此资源的具体屏幕尺寸或其他条件(主要用于响应式设计)[^1]. --- #### 3. 实际案例分析 下面是一个综合示例,展示了如何利用 `<source>` 标签为同一个 `<video>` 提供多种格式的支持: ```html <video controls> <!-- 针对广泛支持的MP4格式 --> <source src="movie.mp4" type="video/mp4"> <!-- 对于更开放标准友好的WebM格式 --> <source src="movie.webm" type="video/webm"> <!-- 老旧或者特殊需求下使用的Ogg Theora编码 --> <source src="movie.ogg" type="video/ogg"> <!-- 备注信息给无法解析以上任何一种格式的老版浏览者看 --> Your browser does not support the video tag. </video> ``` 同样地,在 `<audio>` 标签下也可以应用相同逻辑: ```html <audio controls> <source src="song.mp3" type="audio/mpeg"> <source src="song.ogg" type="audio/ogg"> Your browser does not support the audio element. </audio> ``` 在这些例子中,如果用户的浏览器支持 MP4,则会选择加载 `movie.mp4`;如果不支持则继续向下寻找下一个匹配项直到找到合适的为止。 --- #### 4. 使用 JavaScript 动态控制 除了静态声明外,还可以借助 JavaScript 编程方式动态更改当前正在使用的媒体源。比如当检测到网络状况变差时切换成更低质量但占用带宽较少的版本等等[^1]: ```javascript const videoElement = document.querySelector('video'); if (networkConditionIsPoor()) { videoElement.src = 'low_quality_video.mp4'; } else { videoElement.src = 'high_quality_video.mp4'; } // 或者移除现有的<source>, 添加新的 let newSource = document.createElement('source'); newSource.src = 'alternative_source.webm'; newSource.type= 'video/webm'; videoElement.appendChild(newSource); ``` 需要注意的是直接修改 `src` 属性可能会覆盖掉原有的所有 `<source>` 设置,所以在复杂场景下推荐操作 DOM 结构而非简单替换字符串值。 --- #### 5. 注意事项与最佳实践 尽管 `<source>` 提供了极大的灵活性,但在实际项目部署过程中仍需注意一些细节问题: - **优先级安排合理**:把最普遍接受度高的格式放在首位以便大多数用户获得最快体验速度。 - **保持一致性命名约定**:对于同一份素材的不同压缩形式最好维持统一前缀加扩展名的方式便于管理和维护。 - **测试充分覆盖各端口差异**:由于存在众多品牌型号各异移动终端加上桌面操作系统组合可能性巨大,务必经过详尽回归检验确认预期行为一致无误[^3]。 ---
评论 14
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值