HTML5 播放器

随着 HTML5 的普及，越来越多视频网站使用 <video></video> 标签播放直播、点播内容（如下图所示）。使用 <video> 的好处，主要以下两点。

  • 可以直接在页面中播放，也就是所谓的“区域播放”，上半屏是视频播放，下半屏是其他内容，可以一边播放，一边看其他内容。
  • 某些应用如微信朋友圈的 Webview 限制外部打开视频，这样要在微信推广的话，区域播放就迫切需要了。

尽管有以上好处，但是旧有的点解链接调用外部播放器打开视频的功能还是有其价值的，因为：

  • HTML5 Video 兼容性问题，对 <video> 不一定完整支持。这时，调用外部播放器作为一种向下兼容（fallback/polyfills）方案出现，在不支持的情况下，提示用户选择。
  • 提示使用客户端打开（引导用户使用客户端）。

播放器功能

HTML5 播放器是页面的播放器，通过浏览器提供的接口调用其功能。相当于客户端封装的播放器而言页面播放器的功能不算强大，但基本的播放需求还是可以满足的。

  • width/height：高度、宽度，可设置百分比的相对单位进行页面自适应，兼容横、竖屏幕的切换。
  • poster：设置视频封面，可设置海报或截图（不过图片尺寸不好控制）。
  • autoplay/preload: 如果出现该属性，则视频在就绪后马上播放。对于免费的内容。可以立刻播放。否则用户点击了播放就跳到“订购”。如果自动播放会占用用户的流量 。
  • loop： 如果出现该属性，则当媒介文件完成播放后再次开始播放。
  • controls：如果出现该属性，则向用户显示控件，比如播放按钮、全屏。如果需要自定义播放器样式，可以设置该属性不去显示默认控件。利用浏览器 JavaScript 接口实现相应的功能。

<video> 元素提供的方法如下（参见W3C School）。

<video> 元素提供的属性如下。
<video> 元素提供的事件如下。

兼容性测试

关于浏览器自带播放器的兼容问题，详细可参见《基于web网页视频播放常见问题》,文中分析主要的原因如下。

为什么有些安卓手机无法播放视频？ ……我们知道安卓播放跟厂商支持情况有关，其实前端 JS 这边对 <video> 标签的解析和 H264 的解码做不了什么实质的事情，我们只能尽量使用 HTML5 的 API 接口找到 hack 各种设备的方案，但关键还是看厂商支持情况，所以要在前端实现适配难度很大。
……
安卓由于严重的系统碎片化问题，导致不同的厂商、不同的浏览器对上述两种条件的支持各不相同，所以安卓没法简单的说到底是否支持 HTML5 播放，甚至同一个厂商的不同机型，其特点都不一样，我们遇到过单独支持 flash 的，单独支持 html5 的，或者二者都支持的，甚至还有都不支持的，另外还有明明实际上能使用 HTML5 播放但 API 又返回说不支持播放的。对此我们针对不同的 Android 设备和浏览器做了些矫正和强制判断，许多问题需要 Case by Case 去解决。

当前我们不但希望使用 <video> 播放，而且需要可以半屏内区域播放，最好还是在不修改源情下进行。首先我测试结果如下表。

机型

是否支持区域播放

直播格式

点播格式

视频格式

rtsp

m3u8

3gp

mp4

 

Android 2.24

No

Yes

No

Yes

Yes

 

Android 2.35

No

Yes

No

Yes

Yes

 

Android 4.0

Yes

Yes

Yes

Yes

Yes

 

Android 4.1

Yes

Yes

Yes

Yes

Yes

 

Android 4.2

Yes

Yes

Yes

Yes

Yes

 

Android 4.3

Yes

Yes

Yes

Yes

Yes

 

Android 4.4

Yes

Yes

Yes

Yes

Yes

 

iOS 6

No

No

Yes

Yes

Yes

 

iOS 7

No

No

Yes

Yes

Yes

 

iOS 8

No

No

Yes

Yes

Yes

 

WP 867

No

No

No

Yes

Yes

 

WP 8.18

Yes

No

No

Yes

Yes

 

这里根据上表，尝试总结如下几个方面。

  1. 视频格式方面：一般安卓机型都支持 rtsp 格式，而m3u8 的话 Android 3.0 以后都支持。m3u8 是苹果推荐的格式，所以 iOS 都支持。点播的话，mp4 一般都支持（H264压缩算法）。
  2. 关于区域内播放视频，Android 2.2 不支持， Android 2.3 以后的版本支持。iPad 可以区域播放 iPhone 却不行。iPhone 有一种情况可以区域播放，就是在 Webview 中打开这个特性，仅限应用内的 Webview 使用，——这也就是朋友圈能够区域播放的原因。
  3. 对于实在不支持 <video> 的浏览器，可以在开始标签和结束标签之间放置文本内容，这样老的浏览器就可以显示出不支持该标签的信息。

一般来讲，Android 版本越高，问题越少。即使浏览器可以使用 <video> 播放，在细节上也会遇到各种问题。下面具体说明。

具体障碍

以上讨论的是浏览器自带浏览器。实际使用过程中，使用国产的第三方 Webkit浏览器可能性会大一些，例如 UC、QQ浏览器等等——因此又可以把兼容性问题划分为自带浏览器的和第三方浏览器的。开发过程中遇到的具体如下。

    • 渲染问题，例如 QQ 浏览器，直播播放器播放时滚动会遮盖导航，UC 浏览器 <video>标签总是在前，设置 z-index 无效。
    • 华为机器不能播放标清内容（RTSP 流）
    • QQ X5 内核浏览器需要直接写 m3u8，不能跳转方式指定。
    • 小米1 video 标签失效（Android 4.1 默认浏览器），属于兼容性问题。
    • 播放源地址，如果经过 HTTP 302 重定向跳转的话，低于 Android 4.4 的机器可能不能最终获取 m3u8/mp3/3gp 源地址。尤其对于直播的地址，因为需要鉴权、获取手机号码等流程，中间需要经过多次跳转，所以旧版的浏览器就不能播放了1。试比较以下 HTML 代码的写法：
      [html] view plain copy
       在CODE上查看代码片派生到我的代码片
      1. <!-- 通过 jsp 返回 m3u8 地址，这是间接的方式 -->  
      2. <video src="http://server/getLive.jsp"/>  
      3. <!-- 直接写出 m3u8 地址 -->  
      4. <video src="http://server/live.m3u8"/>   

      对此，我们暂时暴露最终源地址给前端 <video> 标签。不过这样带来潜在的一个问题（见下一点）。

    • 因为源地址直接暴露了，所以对防盗链方面来说是有害而无利的。之所以之前的跳转获取源地址相对是安全点的，是因为那获取过程是间接的。——当然无论间接还是直接，终端还是晓得源地址的。
    • poster="img.jpg" 设置图片，不能 100% 自适应宽度。进而使用 video.background CSS 属性，但会有播放时背景不会消失的问题（Android 上）
    • iOS 7 Safari 不能使用 onclick 登记单击事件； iOS 8 无此问题
    • iOS 8 下如果设置播放源 src="" 为空的话，会向用户提示“不可播放”的图标；iOS 7 不会。这个情况是说用户没有权限播放的时候才会设置 src=“”。
    • 综上三点问题所述，采用一层 <img /> 遮罩的做法，播放的时候才显示 video 标签。这步需要相关的  JavaScript 的编码。

转载于:https://www.cnblogs.com/wt695742319/p/5273168.html

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

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

相关文章

linux shell之控制台打印各种颜色字体和背景

linux shell之控制台打印各种颜色字体和背景

1 问题 控制台打印各种颜色字体和背景 字体颜色 #30:黑 #31:红 #32:绿 #33:黄 #34:蓝色 #35:紫色 #36:深绿 #37:白色 背景颜色 #40:黑 #41:深红 #42:绿 #43:黄色 #44:蓝色 #45:紫色 #46:深绿 #47:白色 echo -e "\e[43;35m chenyu\e[0m hello word&quo…
阅读更多...
修改GIT的user.name和user.email

修改GIT的user.name和user.email

为什么80%的码农都做不了架构师&#xff1f;>>> $ git config --global --replace-all user.email "输入你的邮箱" $ git config --global --replace-all user.name "输入你的用户名" ----验证是否修改成功---- $ git config --list 转载…
阅读更多...
sql distinct 去重复 (mysql)

sql distinct 去重复 (mysql)

DISTINCT 去重复 &#xff08;运动扭伤腰。。。悲伤。。。 (▼ _ ▼) &#xff09; 首先&#xff0c;例如我们的表&#xff1a; 首先观察表&#xff1a; 其中第二行和第三行和第八行的name1的只是重复的&#xff0c;但第八行的age1确是12&#xff0c;与第二行和第三行不同…
阅读更多...
如何5分钟上手使用OCR

如何5分钟上手使用OCR

随便打开一个Microsoft Visual Studio&#xff0c;新建一个WinForms项目&#xff0c;从下面列表中随便选择一个NET框架。net35;net40;net45;net451;net452;net46;net461;net462;net47;net471;net472;net48; netstandard2.0;netcoreapp3.1; net5.0;net6.0;创建完窗口后&#xff…
阅读更多...
利用Excel VBA批量计算气象数据多个台站多年来春季和冬季降水量和平均气温

利用Excel VBA批量计算气象数据多个台站多年来春季和冬季降水量和平均气温

气象数据是地理数据的重要组成部分，存储量虽然不大，但是处理过程非常繁琐，长时序数据更不用说。本文总结了一个气象数据的基本处理方法。 如下图所示，气象数据的排列格式是区站号→年→月→降水量→平均气温，时间范围为1983~2012年，每一年都有台站数300多个，下面按区站…
阅读更多...
VMware Workstation 12新建虚拟机

VMware Workstation 12新建虚拟机

1、点击“创建新的虚拟机”2、选择“自定义”(初学选择典型也可以)&#xff0c;下一步3、默认&#xff0c;直接下一步4、通常都是先创建虚拟机&#xff0c;等虚拟机创建完成后再来安装操作系统&#xff0c;若安装过程出现什么问题方便解决&#xff0c;故选择“稍后安装操作系统…
阅读更多...
sql count用法_SQL学习笔记3：count（*）函数

sql count用法_SQL学习笔记3：count（*）函数

1.count(*)函数用法COUNT(*) 函数返回表中的记录数&#xff0c;具体来说&#xff0c;返回值是一个数字。语法&#xff1a;返回表中所有记录的数量&#xff1a;SELECT COUNT(*) FROM table_name返回表中满足一定条件的记录的数量&#xff1a;SELECT COUNT(*) FROM table_name WH…
阅读更多...
sql order by,desc和limit使用(mysql)

sql order by,desc和limit使用(mysql)

(&#xff61;ŏ_ŏ) 首先我们来看一个表&#xff1a; 在此我们要进行排序&#xff0c;按降序排序&#xff0c;就是从大到小。然后我们只要查询前2条数据。 意思就是我们需要把这个表从大到小排序后&#xff0c;取前两条&#xff0c;那么我们就需要使用到order by 和desc …
阅读更多...
Blazor University （13）组件 — 多线程渲染

Blazor University （13）组件 — 多线程渲染

原文链接&#xff1a;https://blazor-university.com/components/multi-threaded-rendering/多线程渲染由于 Blazor Server 应用程序中可用的线程不止一个&#xff0c;因此完全有可能不同的组件可以让不同的线程在其上执行代码。这在基于异步任务的操作中最常见。例如&#xff…
阅读更多...
sql 之like 和通配符%,_（mysql）

sql 之like 和通配符%,_（mysql）

(&#xff61;ŏ_ŏ) like模糊查询&#xff0c;啥叫模糊查询&#xff1f; 例如&#xff1a;我们一个数据库里面存在在一个人叫做李二三四。我们忘记了他的名字&#xff0c;只记得他的姓名&#xff0c;那么我们就可以使用like加上通配符来查询出我们所要的结果&#xff1b;话说…
阅读更多...
php邮件代码c语言,C语言实现邮件发送功能(SMTP)源码

php邮件代码c语言,C语言实现邮件发送功能(SMTP)源码

【实例简介】C 语言编写的邮件发送器是SMTP协议的源代码和EXE执行程序均在里面使用VS2013开发环境生成&#xff0c;填写对应参数即可成功进行邮件发送&#xff0c;不用配置邮件服务器&#xff0c;只需一个支持SMTP协议的邮箱账号密码即可【实例截图】【核心代码】#include #inc…
阅读更多...
【线性筛】【质因数分解】【约数个数定理】hdu6069 Counting Divisors

【线性筛】【质因数分解】【约数个数定理】hdu6069 Counting Divisors

d(x)表示x的约数个数&#xff0c;让你求&#xff08;l,r<10^12,r-l<10^6,k<10^7&#xff09; #include<cstdio> using namespace std; #define MOD 998244353ll #define MAXP 1000100 typedef long long ll; ll x,y; int T,K; bool isNotPrime[MAXP10]; int num…
阅读更多...
学霸们的科研工具

学霸们的科研工具

阅读更多...
C#/.Net 不要再使用Aspose和iTextSharp啦！QuestPDF操作生成PDF更快更高效！

C#/.Net 不要再使用Aspose和iTextSharp啦！QuestPDF操作生成PDF更快更高效！

QuestPDFQuestPDF是一个开源的工具库&#xff0c;可以在.NET或者.Net Core中生成pdf文档它提供了一个布局引擎&#xff0c;设计时考虑到了完整的分页支持以及灵活性要求&#xff01;比市面上常见的Aspose和iTextSharp好用太多了&#xff01;GitHub地址安装Install-Package Ques…
阅读更多...
C#创建桌面快捷方式

C#创建桌面快捷方式

1、添加引用Windows Script Host Object Model，并引用命名空间using IWshRuntimeLibrary; 2、代码 using System; using IWshRuntimeLibrary; using System.Windows.Forms;namespace WindowsFormsApplication1 {public partial class Form1 : Form{public Form1(){InitializeC…
阅读更多...
Java报表工具FineReport导出EXCEL的四种API

Java报表工具FineReport导出EXCEL的四种API

在实际的应用中会经常需要将数据导出成excel&#xff0c;导出的方式除原样导出还有分页导出、分页分sheet导出和大数据量导出。对于excel 2003版&#xff0c;由于限制了每个sheet的最大行数和列数&#xff0c;大数据量导出时会默认时分多个sheet&#xff0c;而excel2007不会出现…
阅读更多...
sql in 用法(mysql)

sql in 用法(mysql)

我们先看一个如下数据库表&#xff1a; 我们如果想查询这张表里面age为11和1的人该怎么办呢&#xff1f; 那么我们的 in 操作符就起作用了&#xff1a; SELECT * FROM table1 WHERE age1 IN(11,1); 查询来自表哥table1的数据&#xff0c;条件为age1 在(11,1)这两个数之中…
阅读更多...
matlab的循环语句裁图,[MATLAB图像处理] 多幅图片处理的循环语句

matlab的循环语句裁图,[MATLAB图像处理] 多幅图片处理的循环语句

多幅图片处理的循环语句 小弟毕业设计关于视频去雾处理&#xff0c;将视频截取为图片后对每张图片进行处理&#xff0c;其中需要用到循环语句来减少工作量&#xff0c;但自己对循环语句不怎么会&#xff0c;希望哪位大大能够给予帮助&#xff0c;谢谢了程序如下block_size 15;…
阅读更多...
开源社·读书播客第一期：《大教堂与集市》

开源社·读书播客第一期：《大教堂与集市》

点击蓝字&#xff0c;关注我们&#xff5c;作者&#xff1a;许银&#xff5c;编辑&#xff1a;Corrie&#xff5c;设计&#xff1a;朱亿钦Hi&#xff0c;各位开源爱好者&#xff0c;在世界读书日这个特殊的日子里&#xff0c;我们开源社踩着潮流来了&#xff0c;近一年来&#…
阅读更多...
LeetCode:Count Primes

LeetCode:Count Primes

Problem: Description: Count the number of prime numbers less than a non-negative number, n. Credits:Special thanks to mithmatt for adding this problem and creating all test cases. Solution:采用的为埃拉托斯特尼筛法 算法描述&#xff1a;&#xff08;来自百度…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023