首页 > 鼠标键盘 >

[h5]一个基于HTML5实现的视频播放器代码解析

电脑杂谈　发布时间：2019-08-26 02:03:08　来源：网络整理

html5播放mp4视频代码_html5导航网站源码_html5 mp4播放器源码

本文链接：

HTML5 是最新的 HTML 标准。

HTML5 是专门为承载丰富的 web 内容而设计的，并且无需额外组件。

HTML5 拥有新的语境、图形以及多媒体元素。

HTML5 提供的新元素和新的 API 简化了 web 应用程序的构建。

HTML5 是跨平台的，被设计为在不同类型的软件（PC、平板、手机、电视机等等）之上运行。

注释：HTML5 中默认的字符编码是 UTF-8。

HTML5 的一些最有趣的新特点：

所有现代浏览器都支持 HTML5。

此外，所有浏览器，不论新旧，都会手动把未识别元素做成行内元素来处理。

正因如此，您可以帮助老式浏览器处理”未知的“ HTML 元素。

注释：您甚至可以教授石器时代的 IE6 如何处理未知的 HTML 元素。

上述方案可用于所有新的 HTML5 元素，但是：

注意：Internet Explorer 8 以及更早的版本，不允许对未知元素添加颜色。

幸运的是，Sjoerd Visscher 创造了 "HTML5 Enabling JavaScript","the shiv"：

<!--[if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

以上代码是一段注释，但是 IE9 的初期版本会读取它（并理解它）。

web 开发者常常不确定在 HTML 中使用的代码风格和词汇。

在 2000 年至 2010 年之间，许多 web 开发者从 HTML 转换为 XHTML。

通过 XHTML，开发者不得不编写有效的“格式良好的”代码。

HTML5 在代码验证时会更宽松一点。

通过 HTML5，您需要建立属于自己的最佳实践、样式指南和代码约定。

大多数 web 服务器（Apache、Unix）对文件名的大小写敏感：

不能以 london.jpg 访问 London.jpg。

其他 web 服务器（微软，IIS）对大小写不敏感：

能够以 london.jpg 或 London.jpg 访问 London.jpg。

如果使用混合大小写，那么您需要维持高度的一致性。

如果您从对大小写不敏感的服务器转到一台对大小写敏感的服务器上，这些小出错将破坏您的网站。

为了规避很多疑问，请始终使用小写文件名（如果可以的话）。

HTML 文件名应该使用扩展名.html（而不是.htm）。

CSS 文件需要使用扩展名.css。

JavaScript 文件需要使用扩展名.js。

当视频被包括在网站中时，它被称为内联视频。

如果您打算在 web 应用程序中使用内

html5 mp4播放器源码_html5播放mp4视频代码_html5导航网站源码

联视频，您应该意识到很都认为内联视频令人失望。

同时请注意，用户可能将要关闭了浏览器中的内联视频选项。

我们最好的建议是只在客户期望听到内联视频的地方包括它们。一个正面的举例是，在用户应该发现视频并单击某个链接时，会开启页面之后播放视频。

标签描述

不赞成。定义内嵌 applet。

<embed>

不赞成。定义内嵌对象。（HTML5 中允许）

定义内嵌对象。

<param>

定义对象的参数。

标签描述

<video>

标签定义声音，比如音乐或其他音频流。

<embed>

标签定义嵌入的内容，比如软件。

HTML 5 + <object> + <embed>

<video width="320" height="240" controls="controls">
  <source src="movie.mp4" type="video/mp4" />
  <source src="movie.ogg" type="video/ogg" />
  <source src="movie.webm" type="video/webm" />
  <object data="movie.mp4" width="320" height="240">
    <embed src="movie.swf" width="320" height="240" />
  </object>
</video>

上例中使用了 4 中不同的视频格式。HTML 5 <video> 元素会尝试播放以 mp4、ogg 或 webm 格式中的一种来播放视频。如果均成功，则回退到 <embed> 元素。

注释：使用 <!DOCTYPE html> (HTML5) 解决验证问题。

在 HTML 中显示视频的最简单的方式是使用优酷等视频网站。

如果您希望在网站中播放视频，那么您可以把视频上传到b站等视频网站，然后在您的网页中插入 HTML 代码即可播放视频：

<embed src="http://player.youku.com/player.php/sid/XMzI2NTNTMy/v.swf" 
width="480" height="400" 
type="application/x-shockwave-flash">
</embed>

如果网站包括指向媒体文件的超链接，大多数浏览器会使用“辅助应用程序”来播放文件。

以下代码片段显示指向 AVI 文件的链接。如果用户单击该链接，浏览器会开启“辅助应用程序”html5 mp4播放器源码，比如 Windows Media Player 来播放这个 AVI 文件：

<a href="movie.swf">Play a video file</a>

下面的 HTML 片段显示嵌入网站的一段 Flash 视频：

<object data="movie.swf" height="200" width="200"/>

<video> 是 HTML 5 中的新标签。

<video> 标签的作用是在 HTML 页面中嵌入视频元素。

以下 HTML 片段会显示一段嵌入网站的 ogg、mp4 或 webm 格式的视频：

<video width="320" height="240" controls="controls">
  <source src="movie.mp4" type="video/mp4" />
  <source src="movie.ogg" type="video/ogg" />
  <source src="movie.webm" type="video/webm" />
Your browser does not support the video tag.
</video>

html5导航网站源码_html5 mp4播放器源码_html5播放mp4视频代码

最近一段时间在使用PhoneGap开发一个App应用，App需要播放视频，本想直接使用html5的video，但使用它在全屏播放时不支持横屏播放，只能舍弃。最终决定还是自己封装一个播放器算了，免得将来要扩展用途麻烦。

最近迷上hi这个词汇，所以我给这个播放器取名就叫：hivideo。

hivideo是一款基于html5的视频播放器，摒弃video原有的播放控制条样式，自己重写了一次。支持暂停、播放进度控制、声音控制、全屏播放。如果是要在手机端使用hivideo，全屏播放时还支持横屏播放。

hivideo最终推动的效果如下：

hivideo目录结构：

复制代码

assets
----images
----hivideo.css
hivideo.js

复制代码

要想使用hivideo，首先得在主图标采用形状hivideo.css文件。

<link rel="stylesheet" href="assets/hivideo.css" />

hivideo.js文件可在主页面直接引用，同时也支持CommonJs、AMD规范。

在应该转化为hivideo播放器的video标签上添加属性：

<video ishivideo="true"></video>

hivideo会手动把里面的video元素转化为hivideo播放器。我们还可以在video标签上修改播放属性：

1.autoplay: 自动播放。

2.isrotate：全屏是否横屏播放，如果在手机端使用hivideo，我们可以修改该属性为true，表示全屏播放时横屏显示。

3.autoHide：播放视频时手动隐藏控制条。

使用方法：

<video ishivideo="true" autoplay="true" isrotate="false" autoHide="true">
    <source src="http://www.html5videoplayer.net/videos/madagascar3.mp4" type="video/mp4">
</video>

如果是后期动态添加的video元素，也可以借助hivideo动态读取。例如页面动态添加了一个id为”player”的video元素，可借助如下方式把video转换为hivideo播放器：

hivideo(document.getElementById("player"));

演示Demo：

开源地址：

目前大多数浏览器都支持video元素html5 mp4播放器源码，并且不同浏览器实现的video样式也不尽相同。

chrome实现的播放器样式：

Firefox实现的播放器样式：

IE实现的播放器样式：

为了让播放器在各个浏览器下风格统一，首先要隐藏各个浏览器实现的形状。但一般我们借助浏览器开发软件查看不到播放器下的元素，因为很多元素都是阴影元素，它们是借助文档片段附加到video上，对于文档流是不可见的。

如何查看浏览器下的阴影元素？Chrome为研发人员提供了可选项，打开开发者工具->Settings->General页签，我们能看到Elments有一个叫做”Show user agent shadow DOM”的选项：

html5 mp4播放器源码_html5导航网站源码_html5播放mp4视频代码

勾选上该选项，现在我们借助开发软件可以查看到video下的播放元素：

上图中<div pseudo=”-webkit-media-controls”>元素就是控制条的容器，我们只要修改它的display为none就可以隐藏掉控制条，但也应该兼容各个浏览器：

复制代码

video[ishivideo="true"]::-webkit-media-controls{
display:none !important;
}
video[ishivideo="true"]::-moz-media-controls{
display:none !important;
}
video[ishivideo="true"]::-o-media-controls{
display:none !important;
}
video[ishivideo="true"]::media-controls{
display:none !important;
}

复制代码

这里我遇到一个费解的弊端，把里面的风格通过合并的方法写是无效的，下面的写法不能隐藏掉阴影元素：

复制代码

video[ishivideo="true"]::-webkit-media-controls,
video[ishivideo="true"]::-moz-media-controls,
video[ishivideo="true"]::-o-media-controls,
video[ishivideo="true"]::media-controls{
    display:none !important;
}

本文来自电脑杂谈，转载请注明本文网址：
http://www.pc-fly.com/a/bofangqi/article-120599-1.html

相关阅读

发表评论　　请自觉遵守互联网相关的政策法规，严禁发布、暴力、反动的言论

张显阳

我最亲爱的鸽子

2026年03月28日回复顶转发
张晓琳

求直播

2026年03月28日回复顶转发

每日福利

十一键自定义功能手电筒X700199出售激光鼠标

键盘按键检测器（键盘测试软件）

amr文件用什么打开,小编教你如何打开amr文件

李荣浩表达了黑人国王的荣耀，并得到了30万网民的称赞. 腾讯官员道歉

热点图片

热点排行