HTML5多媒体标签用法

1、借助第三方网站播放视频

直到现在，我们的视频依旧是采用第三方的网站(如优酷土豆)播放视频，并且需要借助于flash技术。

2、利用HTML5中的video实现

但是在HTML5中，我们只需要借助video这个标签就能实现视频的播放。

标签属性:

1. autoplay——视频默认加载完播放
2. controls——播放的控件
3. loop——控制视频循环播放
4. poster——在没有播放之前渲染一张图片作为预览

<video autoplay controls loop poster="img/l.jpg">
    <source src="movie/movie01.mp4">
    <source src="movie/movie01.ogg">
    <source src="movie/movie01.webm">
</video>

各大浏览器所支持的视频格式

当前。video元素支持的三种视频格式：MP4、ogg、webm

不同的浏览器之间识别的格式是不一样的，不过现在MP4格式基本上都被兼容

利用source标签实现兼容：

<video autoplay controls loop poster="1.jpg">
<source src="movie/movie01.mp4"/>
<source src="movie/movie01.ogg"/>
<source src="movie/movie01.webm"/>
</video>

总结：

在实际工作中，如果是一个相对比较大的视频建议还是利用第三方的网站去实现视频播放，一些小的广告类的小视频可以用video

视频的API

1. play() 视频播放
2. pause() 视频暂停
3. load() 重新加载视频或者音频

<video id="video" src="movie/movie01.mp4"></video>
<button id="btn">按钮</button>
<script>
//控制视频的播放  play()  暂停：pause()

var btn = document.getElementById("btn");
var video = document.getElementById("video");
var bool = true;//默认为不播放

btn.addEventListener("click", function () {
    if (bool) {
        video.play();
        bool = false;
    } else {
        video.pause();
        bool = true;
    }
})
</script>

音频：audio的用法与视频一模一样

欢迎分享本文，转载请保留出处：前端ABC » HTML5多媒体标签用法