HTML中,怎么让视频在没有播放的时候显示视频的缩略图?

html-css08

HTML中,怎么让视频在没有播放的时候显示视频的缩略图?,第1张

使用video标签的poster属性,下面显示的是aa.gif这个图片作为缩略图

<video controls poster="/images/aa.gif">

<source src="movie.mp4" type="video/mp4">

<source src="movie.ogg" type="video/ogg">

您的浏览器不能使用最新的视频播放方式呢

</video>

你好,非常高兴能解决你的问题:

大多数视频是通过插件(比如 Flash)来显示的。然而,并非所有浏览器都拥有同样的插件。

HTML5 规定了一种通过 video 元素来包含视频的标准方法。

在HTML5中,video元素目前支持三种格式的视频文件,

1.Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件

2.MPEG4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件

3.WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件

那么在HTML5中如何显示视频呢?例子如下:

复制代码

代码如下:

<video src="demo.mp4" width="500" height="250" controls="controls">您的浏览器不支持此种视频格式。</video>

好了,现在来解释下video元素中各属性的含义,其中width、height就不解释了啊,主要说下controls,顾名思义,controls 就是控件们,哈哈,就是视频的播放、音量暂停等控件。video元素中间插入的汉字,聪明的你一定知道的,是提示用户浏览器不支持视频格式使用的。

需要注意的是,要确保适用于Safari 浏览器,视频文件必须是 MP4类型。而ogg格式的视频则是适用于Firefox、Opera 以及Chrome 浏览器。Internet Explorer 8 不支持 video 元素。在 IE 9 中,将提供对使用 MPEG4 的 video 元素的支持。

当然了,我们如果不确定自己的浏览器支持什么格式的视频,可以先检测一下,检测方法在另一片博文里有,感兴趣的可以去看一下。若是不想麻烦,那怎么办呢?我们可以这样:

复制代码

代码如下:

<video width="500" height="250" controls="controls"> 

<source src="movie.ogg" type="video/ogg"> 

<source src="movie.mp4" type="video/mp4"> 

您的浏览器不支持此种视频格式。 

</video>

video 元素允许多个 source 元素。source 元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式,这样我们只要多准备几个不同格式的视频就可以了。

接下来,介绍几个video标签的属性,

1.autoplay :出现该属性意味着视频在就绪后将自动播放,用法:autoplay="autoplay"

2.controls :出现该属性意味着向用户显示控件,如播放按钮等,用法:controls="controls"

3.height:设置高度

4.width:设置宽度

5.loop:自动重播,用法:loop="loop"

6.preload:视频在页面加载时进行加载并预备播放,用法:preload="auto"

auto - 当页面加载后载入整个视频

meta - 当页面加载后只载入元数据

none - 当页面加载后不载入视频

注意:若使用了autoplay,则忽略preload

7.src:要播放视频的url

希望能解决你的问题!

//此行不要复制下一行为开始

'RepairImage.vbs

'Start of Image Preview Repair

'This section repairs the associations for Image Preview

Option Explicit

'Declare variables

Dim WSHShell, p1, p2, p3

Set WSHShell = WScript.CreateObject("WScript.Shell")

p2 = "\ShellEx\{BB2E617C-0920-11d1-9A0B-00C04FC2D6C1}\"

p3 = "{7376D660-C583-11d0-A3A5-00C04FD706EC}"

For Each p1 in Array(".art",".bmp",".dib",".gif",".jfif",".jpe",".jpeg",".jpg",".png",".wmf")

WSHShell.RegWrite "HKCR\" &p1 &p2, p3

Next

p1 = ".tif"

p3 = "{1AEB1360-5AFC-11d0-B806-00C04FD706EC}"

WSHShell.RegWrite "HKCR\" &p1 &p2, p3

p1 = ".tiff"

WSHShell.RegWrite "HKCR\" &p1 &p2, p3

p1 = ".htm"

p3 = "{EAB841A0-9550-11cf-8C16-00805F1408F3}"

WSHShell.RegWrite "HKCR\" &p1 &p2, p3

p1 = ".html"

WSHShell.RegWrite "HKCR\" &p1 &p2, p3

'Start of Thumbnail Repair

'This section repairs the view in Thumbnail mode of Explorer.

p2 = "\CLSID\"

p3 = "{25336920-03F9-11cf-8FD0-00AA00686F13}"

For Each p1 in Array(".art",".bmp",".dib",".gif",".jfif",".jpe",".jpeg",".jpg",".png",".tif",".tiff",".wmf")

WSHShell.RegWrite "HKCR\" &p1 &p2, p3

Next

MsgBox "Image Preview and Thumbnail View File" &vbCR &"Associations have been restored.", 4096, "Confirmation"

Set WSHShell = Nothing

//此行不要复制上一行未结束

将代码粘贴到记事本上然后保存并将名称.txt改为.vbs格式的,然后点击打开弹出对话框点击“确定即可”,然后到html页面文件夹下点击查看方式为缩略图查看即可查看到html为缩略图显示方式