HTML5——新特性，播放器

1. <audio> 标签，HTML5 中播放音频，
<body>
     <audio id="audio" src="aud/audio.mp3" controls="controls">你的浏览器不支持</audio>
</body>
control 属性供添加播放、暂停和音量控件。
source规定了多媒体资源, 可以是多个，在 <video> 与 <audio>标签中使用
在<audio> 与 </audio> 之间你需要插入浏览器不支持的<audio>元素的提示文本。
<audio> 元素允许使用多个 <source> 元素. <source> 元素可以链接不同的音频文件，浏览器将使用第一个支持的音频文件
例：
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
您的浏览器不支持 audio 元素。
</audio>
也可以自己设定播放和暂停键
例：
     <button onclick="clickA()">播放/暂停</button>
     <audio id="audio" src="aud/audio.mp3">你的浏览器不支持</audio>
    <script>
        var a=document.getElementById("audio");
        function clickA() {
            if(a.paused){
                a.play();
            }else {
                a.pause();
            }
        }
    </script>
2.<video> 元素提供了播放、暂停和音量控件来控制视频。
同时 <video> 元素也提供了 width 和 height 属性控制视频的尺寸.如果设置的高度和宽度，所需的视频空间会在页面加载时保留。如果没有设置这些属性，浏览器不知道大小的视频，浏览器就不能再加载时保留特定的空间，页面就会根据原始视频的大小而改变。
<video> 与</video> 标签之间插入的内容是提供给不支持 video 元素的浏览器显示的。
<video> 元素支持多个 <source> 元素. <source> 元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式
例：<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
您的浏览器不支持 HTML5 video 标签。
</video>
例：<body>

<div style="text-align:center">
<button onclick="playPause()">播放/暂停</button>
<button onclick="makeBig()">放大</button>
<button onclick="makeSmall()">缩小</button>
<button onclick="makeNormal()">普通</button>
<br>
<video id="video1" width="420">
    <source src="mov_bbb.mp4" type="video/mp4">
    <source src="mov_bbb.ogg" type="video/ogg">
    您的浏览器不支持 HTML5 video 标签。
</video>
</div>
<script>
var myVideo=document.getElementById("video1");
function playPause()
{
if (myVideo.paused)
   myVideo.play();
else
   myVideo.pause();
}

function makeBig()
{
myVideo.width=560;
}

function makeSmall()
{
myVideo.width=320;
}

function makeNormal()
{
myVideo.width=420;
}
</script>
</body>

3.编解码工具，不是所有的浏览器都支持同一种格式

1、FFmpeg
2、官方网址:

HTML5——新特性，播放器

猜你喜欢