《WebKit 技术内幕》学习之十一(1):多媒体

第11章 多媒体

        说到浏览器对多媒体的支持,不得不提的就是Flash插件和HTML5之争。Flash对Web的发展起了非常重要的作用,它能够支持视频、音频、动画等多媒体功能,虽然现在大家都在讨论Web前端领域是否应该丢弃Flash插件转而支持HTML5。在本章中,笔者将回顾Web前端中的多媒体发展历程,然后详解现在HTML5中引入的多媒体技术。从整体上来看,这的确是一幅欣欣向荣的景象:从没有原生支持和仅是第三方插件支持,到简单的音视频播放,从音频播放再到使用WebAudio技术来处理音频,最后再到网络实时视频会议,Web被引入了极其强大的能力,前所未有。我们有理由相信,这绝对不是终点。

1 HTML5的多媒体支持

        在HTML5规范出来之前,网页对视频和音频播放的支持基本上都是依靠(Flash)插件来实现,因为HTML语言及相关规范并没有定义视频和音频方面的功能。在HTML5之后,这种情况发生了很大的变化,同文字和图片一样,音频和视频直接成为HTML一系列规范中第一等公民,千万不要小看第一等公民的地位,这不仅仅说明了网页中可以直接支持多媒体的播放,而且还有很多额外的优点。

        首先是JavaScript接口的支持,开发者可以使用JavaScript接口来方便地控制音视频的播放,实现例如播放、停止和记录等功能。

        其次是HTML5支持音视频的真正强大之处——多媒体(如视频)与图片一样可以用其他技术来进行操作,例如使用CSS技术来修改它的样式(如3D变形)。Web开发者可以将视频同Canvas2D或者WebGL结合在一起,而之前Flash插件中的视频是不能(或者轻易)做到的。回顾第二章的示例代码2-2中,“video”元素同“canvas”元素一样被设置了3D变形属性,图2-4就是它的显示结果。

        如果读者觉得HTML5只是提供了音频和视频的播放功能,那就显然低估了它的能力,在HTML5中,对于多媒体的支持大概包括以下几个部分。

        第一个是HTML的元素“video”,它用于视频(当然也包括音频)的播放。第二个是HTML元素“audio”,它用于单纯的音频播放。第三个是可以将多个声音合成处理的WebAudio技术。第四个则是将照相机、麦克风功能与视频、音频和通信结合起来使用的最新技术WebRTC(网络实时通信),这一HTML5对于多媒体领域的重大支持,使得Web领域使用视频对话和视频网络会议成为了现实。

        目前各个浏览器对于HTML5中多媒体的支持正在得到逐步地增强,尤其是对HTML5的“video”和“audio”元素的支持,这一趋势在移动操作系统上体现得更为明显。因为很多移动浏览器其实不支持Flash插件,这直接导致众多视频内容提供商需要将视频和音频改为采用HTML5标准的格式才能正常提供内容。对于WebRTC技术,基于对规范的支持目前走在前面的是Chrome和Firefox浏览器,笔者已经成功使用了Chrome和Firefox来进行网络视频对话,这的确是一项不可思议的新技术。一个完整的多媒体解决方案,通常需要WebKit和Chromium两个项目共同努力,一起解决相关问题,从总体上看,其大致有四个部分。

        第一部分当然是WebKit的基础部分,包括对规范的支持,这其中有DOM树、RenderObject树和RenderLayer树等对多媒体方面的支持。

        第二部分是Chromium的桥接部分,也就是将WebKit的接口桥接到Chromium项目中来,包括接口的桥接、渲染方面的桥接等。

        第三部分是依赖其他多媒体库,包括ffmpeg、libjingle等第三方项目,使用它们来做多媒体方面的处理。

        第四部分是Chromium对多媒体资源获取和使用多媒体库来帮助解码等管线化过程的具体实现。Chromium重新实现了整个媒体播放流程,并针对桌面系统和移动系统采用了一些特殊的技术和解决方法。

        下面依次来看HTML5规范定义的多媒体技术,以及WebKit和Chromium为HTML5多媒体方面的技术做了哪些支持工作,也就是上面这些部分如何运作的。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/644041.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

web系统架构基于springCloud的各技术栈

博主目前开发的web系统架构是基于springCloud的一套微服务架构。 使用的技术栈:springbootmysqlclickhousepostgresqlredisrocketMqosseurekabase-gatewayapollodockernginxvue的一套web架构。 一、springboot3.0 特性:Spring Boot 3.0提供了许多新特性…

第十七章 : Spring Cloud中分布式锁理论与实践(一)

第十七章 : Spring Cloud中分布式锁理论与实践(一) 本章知识点:分布式锁诞生的背景、设计思路以及单机JVM锁在集群的情况存在的缺陷以及讲解了MySQL分布式锁设计方案以及落地思路。 Springboot 2.3.12.RELEASE,spring cloud Hoxton.SR12,spring cloud alibaba 2.2.9.RELE…

网络安全---防御保护--子接口小实验

子接口小实验: 环境准备: 防火墙区域配置为trust: PC设置其ip为同一个网段: 此时尝试ping无法ping通的原因是没有打开防火墙允许ping,我们在图形化界面允许ping即可 最终结果: .com域名服务器: …

​比特币大跌的 2 个原因

撰文:秦晋 原文来自Techub News:​比特币大跌的 2 个原因 比特币迎来大跌!1 月 23 日凌晨,比特币跌破 40000 美元,为去年 12 月 4 日以来首次,日内跌超 3%。这是自 1 月 10 日美国证监会审批通过 11 只比…

C# 实现IUnknown接口(2)

IUnKnown接口定义 [ComImport(), InterfaceType(ComInterfaceType.InterfaceIsIUnknown),Guid("00000000-0000-0000-C000-000000000046")]public interface IUnknown{[PreserveSig]int QueryInterface(ref Guid riid, out IntPtr ppvObject);[PreserveSig]uint AddR…

中仕教育:“三不限”事业编的含义

所谓“三不限”,是指在报考事业单位时,对考生的户籍、年龄、学历不作任何限制。所以全国各地的考生只要符合招聘条件,都可以报考。所以每一年的三不限岗位竞争压力都比较大,报考人数都有很多。 ‘三不限’岗位招考信息在哪里看?…

制作Forms表单收集信息

Forms表单收集信息 背景表单制作New FormForms添加元素分享链接 测试查看结果数据结果可视化结果 背景 今天公司老板计划团建旅游,然后呢想让我们投一下票,说让我做一个表单来统计一下公司员工的信息,(前半句不要信啊&#xff09…

基于Apache httpd为windows11搭建代理服务器

文章目录 一.概述二.检查电脑系统类型三.下载安装Apache Httpd四.代理服务配置五.代理服务安装六.报错解决方法七.测试是否运行成功7.1 本机测试7.2 局域网代理测试 八.设置特定ip可访问(阻止其他ip访问)九.参考文档 一.概述 出于某些原因,我…

架构篇22:CAP理论-布鲁尔定理(Brewer‘s theorem)

文章目录 CAP 理论CAP 应用小结 CAP 定理(CAP theorem)又被称作布鲁尔定理(Brewer’s theorem),是加州大学伯克利分校的计算机科学家埃里克布鲁尔(Eric Brewer)在 2000 年的 ACM PODC 上提出的一…

如何在飞书创建企业ChatGPT智能问答助手应用并实现公网远程访问(1)

文章目录 前言环境列表1.飞书设置2.克隆feishu-chatgpt项目3.配置config.yaml文件4.运行feishu-chatgpt项目5.安装cpolar内网穿透6.固定公网地址7.机器人权限配置8.创建版本9.创建测试企业10. 机器人测试 前言 在飞书中创建chatGPT机器人并且对话,在下面操作步骤中…

10个常考的前端手写题,你全都会吗?(下)

前言 📫 大家好,我是南木元元,热爱技术和分享,欢迎大家交流,一起学习进步! 🍅 个人主页:南木元元 今天接着上篇再来分享一下10个常见的JavaScript手写功能。 目录 1.实现继承 ES5继…

11.前端--CSS-背景属性

1.背景颜色 样式名称: background-color 定义元素的背景颜色 使用方式: background-color:颜色值; 其他说明: 元素背景颜色默认值是 transparent(透明)      background-color:transparent; 代码演示: 背景色…

Lua简介和应用场景介绍

Lua 的介绍 起源:Lua 于 1993 年在巴西里约热内卢的天主教大学(PUC-Rio)由 Roberto Ierusalimschy、Waldemar Celes 和 Luiz Henrique de Figueiredo 开发。 设计目的:Lua 设计的主要目标是为了嵌入到其他应用程序中,…

Leetcode—39.组合总和【中等】

2023每日刷题&#xff08;七十六&#xff09; Leetcode—39.组合总和 算法思想 实现代码 class Solution { public:vector<vector<int>> combinationSum(vector<int>& candidates, int target) {vector<vector<int>> ans;vector<int>…

Docker 魔法解密:探索 UnionFS 与 OverlayFS

本文主要介绍了 Docker 的另一个核心技术&#xff1a;Union File System。主要包括对 overlayfs 的演示&#xff0c;以及分析 docker 是如何借助 ufs 实现容器 rootfs 的。 1. 概述 Union File System Union File System &#xff0c;简称 UnionFS 是一种为 Linux FreeBSD NetB…

Mybatis 踩坑合集

判等的时候integer的0不识别 解决方法&#xff1a; 改成string的把判空 ’ ’ 取消掉 大佬分析 在实体类中定义了get方法&#xff0c;updatebyid的时候会调用自己的get方法&#xff0c;要注意传参

linux部署nginx

linux部署nginx 参考链接&#xff1a;linux 系统下安装nginx 如何使用nginx访问另外一台windows服务器java服务 参考链接&#xff1a;如何使用nginx访问另外一台windows服务器java服务

2024年美赛数学建模思路 - 案例:退火算法

文章目录 1 退火算法原理1.1 物理背景1.2 背后的数学模型 2 退火算法实现2.1 算法流程2.2算法实现 建模资料 ## 0 赛题思路 &#xff08;赛题出来以后第一时间在CSDN分享&#xff09; https://blog.csdn.net/dc_sinor?typeblog 1 退火算法原理 1.1 物理背景 在热力学上&a…

力扣206-反转链表

反转链表 题目链接 解题思路 反转链表&#xff0c;只需要将链表中的元素放入栈中&#xff0c;然后依次出栈&#xff0c;即可实现链表的反转 /*** Definition for singly-linked list.* struct ListNode {* int val;* ListNode *next;* ListNode() : val(0), next(…

MySQL乐观锁与悲观锁

说明 遇见并发情况&#xff0c;需要保证数据的准确性&#xff0c;也就是与正确的预期一致&#xff0c;此时就会用到锁。 锁是在并发下控制程序的执行逻辑&#xff0c;以此来保证数据按照预期变动。 如果不加锁&#xff0c;并发情况下的可能数据不一致的情况&#xff0c;这是个…