媒体元素video

媒体元素

video,audio

video视频，audio音频的属性内容：

1. width,height：可以设置媒体元素的宽高

2. poster属性：指定URI可以在加载视频内容的时候显示另外一幅图像

3. controls属性：用于显示UI控件。

4. 标签内容：用于在浏览器不支持video和audio的时候显示的后备内容

<div id="video">
    <video id="player"
           src="static/4.mpg"
           poster="static/1.jpg"
           witdh="340"
           height="200"
           controls></video>
</div>

注意：一定要为媒体元素添加交互的事件，才能与媒体元素交互(你这不是废话吗？！！)；

emmmmm…… 好吧，我想说在没有添加controls和没有js的情况下打不开。。。让我很头疼
demo:

因为并非所有浏览器都支持媒体格式，所以不用在标签中指定src可以用多个source元素嵌套在里面

<video id="player">
    <source src="1.webm" type="video/webm;codecs='vp8,vorbis'">
    <source src="1.ogv" type="video/webm;codecs='theora,vorbis'">
    <source src="1.mpg">
    浏览器不支持 video
</video>

一般浏览器支持的格式有：

自定义播放：

手动控制媒体的播放
play() pause()两个方法分别带标着暂停和开始

btn.addEventListener("click", function (e) {
        if (player.paused) {
            player.play();
            btn.value = "Pause"
        } else {
            player.pause();
            btn.value = "Play"
        }
    });

demo:

你的浏览器不支持video标签

Play

0/ 0