今天制作一个页面需要用到视频,以前视频基本使用的都是嵌套视频网站的iframe代码,或者直接到视频文件,本次需要实现页面里的视频播放,就做了以下笔记。

我们最常用的代码


<video width="100%" height="auto" controls="controls" id="video" preload="auto"  >
<source src="images/shipin.mp4"   type="video/mp4">
您的浏览器不支持当前播放</video>

video可选属性

autoplay: 自动播放。值是autoplay

controls: 控制/控件。值是controls

height: 视频播放器的高度。值是pixels

width :宽度。值是pixels

loop:环、圈、循环播放的意思。值是loop

muted:视频的音频输出为静音。值是muted

poster:贴画、海报,表示点击播放前的图片。值是URL

preload:预加载,视频在页面加载时加载,并预备播放。使用 "autoplay",忽略该属性。值auto/metadata/none

src:视频的 URL。值是URL

如果考虑到兼容性,就使用以下代码吧!

h5的video标签根据不同的浏览器兼容情况只支持三种编码的视频格式:

<video> 元素支持三种视频格式:MP4、WebM、Ogg。

MP4 = MPEG 4文件使用 H264 视频编解码器和AAC音频编解码器

WebM = WebM 文件使用 VP8 视频编解码器和 Vorbis 音频编解码器

Ogg = Ogg 文件使用 Theora 视频编解码器和 Vorbis音频编解码器

三种视频格式对应的 MIME 类型

MP4是:video/mp4

WebM是:video/webm

Ogg是:video/ogg

格式IEFirefoxOperaChromeSafari
OggNo3.5+10.5+5.0+No
MPEG 49.0+NoNo5.0+3.0+
WebMNo4.0+10.6+6.0+No

   <video controls="controls">
        <source src="images/shipin.webm" type="video/webm">
        <source src="images/shipin.ogg" type="video/ogg">
        <source src="images/shipin.mp4" type="video/mp4">
    </video>

Webm:由Google发布的一个开放、免费的媒体文件格式,其视频文件扩展名为webm。由于webm格式的视频质量和mpeg4较为接近,并且没有专利限制等问题,webm已经被越来越多的人所使用。

ogg:一种开源的视频封装容器,其视频文件扩展名为ogg,里面可以封装vobris音频编码或者 theora视频编码,同时ogg文件也能将音频编码和视频编码进行混合封装。

mpeg4:目前最流行的视频格式,其视频文件扩展名为mp4。同等条件下,mpeg4格式的视频质量较好,但它的专利被MPEG-LA公司控制,任何支持播放mpeg4视频的设备,都必须有一张MPEG-LA颁发的许可证。目前MPEG-LA规定,只要是互联网上免费播放的视频,均可以无偿获得使用许可证。

到这里顺便做下html5的一些笔记

HTML 5的页面结构

一个典型的Web页面有页眉(header),页脚(footer),导航(navigation),正文(central area)和侧栏(side bar)。现在如果是在HTML 4中,HTML部分中的上述这些专用名词需要使用DIV标签来描述。但是,如果是在HTML 5,可以专门为这些区域创建特定的元素名,让HTML更具可读性。以下是形成页面结构的HTML 5元素的更多细节。<header>:表现HTML的标题数据。

<footer>:页面的页脚部分。

<nav>:页面中的导航元素。

<article>:正文内容。

<section>:用在正文中定义section或区段内容。

<aside>:表现页面侧边栏内容。

尾语

如果想更方便,可以使用flv.js,bilbili其开源的H5 flv播放器(https://github.com/bilibili/flv.js)和移动端播放器(https://github.com/bilibili/ijkplayer)还是很不错的。



您的大名:
万水千山总是情,给个打赏行不行。 打赏