HTML5视频：片段，字幕和动态缩略图

在此示例中，'thumbnail.jpg'是将用作视频的缩略图。

HTML5视频仅在单击缩略图映像时才开始？

才能使您的HTML5视频仅在单击缩略图时才启动，您可以使用JavaScript控制视频的戏剧和暂停功能。首先，您需要隐藏视频并仅显示缩略图图像。当单击缩略图时，隐藏了图像，并显示和播放视频。这是一个如何做的示例：

<script> <script> <br> function playVideo（）{<br>var thumbnail = document.getElementById（“ thumbnail”） var video = document.getElementById（“ myvideo”）;<br><br><br>thumbnail.style.display = “ none”;<br>video.style.display =“ block”;<br>video.play（）;<br>} <br>} </script>
在此示例中，当'thumbnail.jpg时“单击图像，'PlayVideo（）'JavaScript函数被调用。此函数隐藏了缩略图，显示视频并开始播放视频。

>如何将字幕添加到我的html5视频中？

以将字幕添加到您的HTML5视频中，您可以使用“视频”标签中的“轨道”元素。 “轨道”元素用于指定字幕，字幕文件或其他包含文本的文件，在视频播放时应可见。这是一个如何使用它的示例：

在此示例中， “ Captions.vtt”是包含视频字幕的文件。 “类型”属性指定了文本曲目的类型，“ srclang”指定了文本曲目的语言，而“标签”为曲目列表提供了标题。
>

>如何为我的HTML5视频创建动态缩略图？

>为您的HTML5视频创建动态缩略图涉及以特定的间隔从视频中捕获帧并显示为缩略图。这可以使用JavaScript和“画布”元素来实现。 “画布”元素用于在网页上绘制图形。这是一个如何做的示例：

<script> <ancript> <br> var Video = document.getElementById（“ myVideo”）; <ance canvas = document.getElementById（“ canvas”）; <ancects = var context = canvas.getContext（“ 2d”）; <br><br><br><br><br><br> video.addeventlistener（addeventListener（ timeupdate”，function（）{<br>context.drawimage（视频，0，0，canvas.width， canvas.height）; <br>}）;</script>

在此示例中，每次触发'timeupdate'事件时，在画布上绘制了视频中的帧，创建一个动态的缩略图。

>如何在我的HTML5视频中添加多个字幕曲目？视频，您可以在“视频”标签中使用多个“轨道”元素。每个“轨道”元素指定不同的字幕文件。用户可以从视频播放器的界面中选择要显示的字幕轨道。这是一个如何做的示例：


在此示例中，'captions_en.vtt'和'catchions_fr.vtt'是分别包含英语字幕的文件。

>如何控制HTML5视频的播放率？

> HTML5视频的播放率可以使用“视频”元素的“ ploplackrate”属性来控制。此属性设置了视频播放的速度。例如，1.0的播放速度以正常速度播放视频，0.5播放视频的一半速度，而2.0播放视频以两倍的速度播放视频。这是一个如何使用它的示例：

慢速
speed up

<script> <ancive = var video = document.getElementById（“ myvideo”）;<br><br><br><br> function slowdown（）{<ancive> video.playbackrate- = 0.1; <br>} <br> <br> function速度（）{<br>video.playbackrate = 0.1; <br>} <br> </script>
在此示例中，单击“慢速”按钮将播放率降低了0.1，然后单击“加速”按钮将播放率提高了0.1。

>如何循环我的html5视频？

>循环您的html5视频，您可以在“视频”标签中使用“循环”属性。 “循环”属性是一个布尔属性。在场时，它指定视频每次完成时都会重新开始。这是一个如何使用它的示例：


在此示例中，视频将无限期地循环。

我如何静音我的html5视频？

>

要使您的HTML5视频静音，您可以在“视频”标签中使用“静音”属性。 “静音”属性是布尔属性。在场时，它指定视频的音频输出应被静音。这是一个如何使用它的示例：


在此示例中，视频将开始使用音频播放。
>

>我如何控制html5的音量视频？

可以使用“视频”元素的“卷”属性来控制HTML5视频的音量。此属性设置了音频播放的音量。该值必须是0.0到1.0之间的数字，其中0.0静音，而1.0最大。这是一个如何使用它的示例：

tound town
turn up

<script> <br> var video = document.getElementById（“ myvideo”）;<br><br><br><br> function turndown（）{<br> if（video.volume> 0.1 ）{<br>video.volume- = 0.1; <br>} <br>} <br> <br> <br> function turnup（）{<br>>如果（video.volume <1.0）{<br>video.volume = 0.1; <br>} <br>} </script>

在此示例中，单击'trow town'down'按钮将卷降低， 0.1，单击“转动”按钮将卷增加0.1。

>要显示HTML5视频的控件，您可以在“视频”标签中使用“控件”属性。 “控件”属性是一个布尔属性。在场时，它指定应显示视频控件。这些控件包括游戏/暂停，音量和全屏。这是一个如何使用它的示例：

在此示例中，视频将使用控件显示。
>

以上是HTML5视频：片段，字幕和动态缩略图的详细内容。更多信息请关注PHP中文网其他相关文章！