HTML5和HLS协议两种技术完美结合解决移动端网页播放问题

什么是HTML5

我们需要先了解一下HTML是什么。HTML的英文全称为Hyper Text Markup Language,即超文本标记语言。HTML5是HTML的一个新版本。HTML 不是一种编程语言,而是一种标记语言 (markup language)。HTML5是对 HTML 标准的第五次修订。

其主要的目标是将互联网语义化,以便更好地被人类和机器阅读,并同时提供更好地支持各种媒体的嵌入。HTML5的设计目的是为了在移动设备上支持多媒体。新的语法特征被引进以支持这一点,如video、audio和canvas 标记。HTML5还引进了新的功能,可以真正改变用户与文档的交互方式。

什么是HLS

HLS (HTTP Live Streaming),Apple的动态码率自适应技术。主要用于PC和Apple终端的音视频服务。包括一个m3u(8)的索引文件,TS媒体分片文件和key加密串文件。

把上述2个技术性很强的概念表述翻译下。就是说H5是一种HTML的新标准,这种新标准支持原生的video标签和video控件。因为video控件标签又支持HLS协议播放。 所以得以实现在手机移动端的网页播放。H5是解决网页播放问题,HLS解决的是移动端播放问题。 两者的结合使得手机移动端的网页播放得以完美的实现。 从而实现了所有观看直播和点播视频的大众无需再下载任何插件就可以欣赏视频内容。 从技术角度上讲,是一种视频观看欣赏体验的大飞跃。

在 HTML5 页面上使用 HLS

直接: <video src="example.m3u8" controls></video>

或者:

<video controls>

<source src="example.m3u8"></source>

</video>

这两种技术结合应用最为广泛就是网络视频直播点播领域。很多品牌的流媒体直播点播系统目前都直接利用两种技术的结合给广大的观看视频用户提供了好的技术支撑,如Adobe Flash Media Server,Wowza Media Server或800Li Media Server。

手机网页观看直播演示

手机APP并支持HTML所需要的开发工具

1. Bizness Apps

2. APPMakr

3. Appsgeyser

4. Mobile Roadie

5. DevmyApp

时间: 2024-10-23 09:14:27

HTML5和HLS协议两种技术完美结合解决移动端网页播放问题的相关文章

FTP文件传输协议两种方式的工作原理

FTP是一种文件传输协议,它支持两种模式,一种方式叫做Standard (也就是 Active,主动方式),一种是 Passive (也就是PASV,被动方式). Standard模式 FTP的客户端发送 PORT 命令到FTP server.Passive模式FTP的客户端发送 PASV命令到 FTP Server. 下面介绍一个这两种方式的工作原理: Standard模式 FTP 客户端首先和FTP Server的TCP 21端口建立连接,通过这个通道发送命令,客户端需要接收数据的时候在这个

设置背景图片的两种方式,并解决手机端背景图片高度自适应问题

1 设置背景图片的两种方式: 方式一: <img src="../img/10.jpg"/ class="back" id="Background"> .back{ position: fixed; width: 100%; height: 100%; display: block; z-index: -100; } 方式二:div class="body" id="Background">

保存会话数据的两种技术

Cookie Cookie是客户端技术,程序把每个用户的数据以cookie的形式写给用户各自的浏览器.当用户使用浏览器再去访问服务器中的web资源时,就会带着各自的数据去.这样,web资源处理的就是用户各自的数据了. Session Session是服务器端技术,利用这个技术,服务器在运行时可以为每一个用户的浏览器创建一个其独享的session对象,由于session为用户浏览器独享,所以用户在访问服务器的web资源时,可以把各自的数据放在各自的session中,当用户再去访问服务器中的其它we

jquery、javascript实现(get、post两种方式)跨域解决方法

一.实现get方式跨域请求数据 浏览器端 <script> $(document).ready(function(){ $.ajax({ url: "http://www.xxx.cn/index.php", type: "get", dataType: "jsonp", //指定服务器返回的数据类型 success: function (data) { console.log(data); } }); }); </script

WebSocket实践——Java实现WebSocket的两种方式

什么是 WebSocket? 随着互联网的发展,传统的HTTP协议已经很难满足Web应用日益复杂的需求了.近年来,随着HTML5的诞生,WebSocket协议被提出,它实现了浏览器与服务器的全双工通信,扩展了浏览器与服务端的通信功能,使服务端也能主动向客户端发送数据. 我们知道,传统的HTTP协议是无状态的,每次请求(request)都要由客户端(如 浏览器)主动发起,服务端进行处理后返回response结果,而服务端很难主动向客户端发送数据:这种客户端是主动方,服务端是被动方的传统Web模式

生成二维码的两种方式

利用qrcode生成二维码,(qrcode矩形二维码符号) 基于jquery的二维码生成插件qrcode,在页面中调用该插件就能生成对应的二维码.qrcode其实是通过使用jQuery实现图形渲染,画图,支持canvas(HTML5)和table两种方式: 使用插件时 1.首先在页面中加入jquery库文件和qrcode插件. <script type="text/javascript" src="jquery.js"></script> &

Android 应用开发 之通过AsyncTask与ThreadPool(线程池)两种方式异步加载大量数据的分析与对比--转载

 在加载大量数据的时候,经常会用到异步加载,所谓异步加载,就是把耗时的工作放到子线程里执行,当数据加载完毕的时候再到主线程进行UI刷新.在数据量非常大的情况下,我们通常会使用两种技术来进行异步加载,一是通过AsyncTask来实现,另一种方式则是通过ThreadPool来实现,今天我们就通过一个例子来讲解和对比这两种实现方式.     项目的结构如下所示:     在今天这个例子里,我们用到了之前一篇文章中写过的一个自定义控件,如果有同学感兴趣的话可以点击这里来先研究下这个控件的实现,为了配合异

IE8及以下兼容h5标签的两种方法

在默认情况下,IE8及以下的IE版本不支持HTML5,这里介绍两种兼容方式 第一种方式:手动创建标签 <script> /*手动创建标签:默认的标签的类型都是行级元素,当设置标签样式时,首先需要将行级元素转换为块级元素,即设置display:block*/ document.createElement("header"); document.createElement("nav"); document.createElement("main&q

ListView+CheckBox两种解决方案及原因分析

最近在用ListView+CheckBox搞一个item选中的项目,我将CheckBox的focus设置为false,另我大喜的是,CheckBox竟然可以选中(窃喜中),这么简单就搞定了,因为数据量较小,也没有发现什么问题. 后来数据多了, 页面需要滑动了, 发现了一个奇怪的问题,前面明明选中了,而再次滑动回去的时候竟然变成未选中状态! 这是我刚开始写的那段错误的代码: @Override public View getView(int position, View convertView,