播放多媒体

最新推荐文章于 2021-09-09 16:38:46 发布

即将入土的羸弱老年人

最新推荐文章于 2021-09-09 16:38:46 发布

阅读量536

点赞数

分类专栏： Web HTML Note 文章标签：多媒体 HTML5 Web

本文链接：https://blog.csdn.net/qq_36823300/article/details/101200654

版权

Web 同时被 3 个专栏收录

23 篇文章 1 订阅

订阅专栏

HTML

21 篇文章 1 订阅

订阅专栏

Note

21 篇文章 0 订阅

订阅专栏

在HTML5出现之前，要在网页中播放多媒体，需要借助Flash插件。浏览器在安装Flash插件后才能播放多媒体。使用HTML5提供的新标签<audio>和<video>可以很方便地在网页中播放音频和视频。

1、HTML5音频

HTML5提供了在网页中播放音频的标准，支持<audio>标签的浏览器可以不依赖其他插件播放音频。

1）audio标签

在HTML5中，可以使用<audio>标签定义一个音频播放器，语法如下。

<audio src="音频文件">...</audio>

src属性用于指定音频文件的URL。<audio>标签支持的音频文件类型包括.wav、.mp3和.ogg等。

<audio>和</audio>之间的字符串指定当前浏览器不支持<audio>标签时显示的字符串。

在HTML文件中定义一个audio标签，用于播放music.wav，代码如下。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Test</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
    </style>
</head>

<body>

    <h1>Audio标签的例子</h1>
    <audio src="music.wav" controls>
        您的浏览器不支持audio标签。
    </audio>

    <script>
    </script>

</body>

</html>

controls属性指定在网页中显示控件，如播放按钮等。

提示：不同浏览器的音频播放器控件的外观也不尽相同，Internet Explorer 8 及其之前版本不支持<audio>标签。

除了前面用到的src和controls属性，<audio>标签还包括如下主要属性。

**除了src和controls外，<audio>标签还包括的主要属性**
属性	值	具体描述
autoplay	True或false	如果是true，则音频在就绪后马上播放
end	数值	定义播放器在音频流中的何处停止播放，默认会播放到结尾
loop	True或false	如果是true，则音频会循环播放
loopend	数值	定义在音频流中循环播放停止的位置，默认为end属性的值
loopstart	数值	定义在音频流中循环播放的开始位置，默认为start属性的值
playcount	数值	定义音频片段播放多少次，默认为1
start	数值	定义播放器在音频流中开始播放的位置，默认从开头播放

2）播放背景音乐

播放背景音乐时通常不需要显示播放控件，因此在定义<audio>标签时，可以将controls属性设置为false（或不使用controls属性）。播放背景音乐时需要自动循环播放，因此在定义<audio>标签时，可以将autoplay属性和loop属性设置为true。

在HTML文件中定义一个<audio>标签，用于播放背景音乐music.wav，代码如下。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Test</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
    </style>
</head>

<body>

    <h1>播放背景音乐的例子</h1>
    <audio src="music.wav" autoplay loop>
        您的浏览器不支持audio标签。
    </audio>

    <script>
    </script>

</body>

</html>

3）设置替换音频源

<audio>标签支持.wav、.mp3和.ogg等多种类型的音频文件，但是并不是所有浏览器都支持每种类型的音频文件。如果只指定一种类型的音频文件，则很可能在使用某些浏览器时不能正常播放。

在<audio>标签中，可以使用<audio>标签指定多个要播放的音频文件。语法如下。

<audio>
    <source src="音频文件1">
    <source src="音频文件2">
    <source src="音频文件3">
    ……
</audio>

改进上面介绍的播放背景音乐的代码，增加替换音频源music.mp3，代码如下。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Test</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
    </style>
</head>

<body>

    <h1>播放背景音乐的例子</h1>
    <audio src="music.wav" controls>
        <source src="music.wav">
        <source src="music.mp3">
        您的浏览器不支持audio标签。
    </audio>

    <script>
    </script>

</body>

</html>

4）使用JavaScript语言访问audio对象

除了使用默认的播放器控制播放音频外，还可以在JavaScript程序中操作audio对象，从而实现更灵活的控制。

（1）检测浏览器是否支持<audio>标签

在JavaScript程序中操作audio对象之前，通常需要检测浏览器是否支持<audio>标签。如果支持，则可以对audio对象进行操作。

可以通过window.HTMLAudioElement属性判断浏览器是否支持<audio>标签。如果window.HTMLAudioElement等于true，则表示浏览器支持<audio>标签，否则表示不支持。

在网页中定义一个按钮，单击此按钮时，会检测浏览器是否支持<audio>标签。定义按钮的代码如下。

<button id="check" onclick="check();">检测浏览器是否支持audio标签</button>

单击按钮check将调用check()函数。定义check()函数的代码如下。

<script type="text/javascript">
    function check() {
        if (window.HTMLAudioElement) {
            alert("您的浏览器支持<audio>标签");
        }
        else {
            alert("您的浏览器不支持<audio>标签");
        }
    }
</script>

（2）在JavaScript程序中获得audio对象

在JavaScript程序中有以下两种方法可以获得audio对象。

（1）使用new关键字创建audio对象，例如：

media = new audio("music.wav");

（2）首先在HTML网页中定义一个Audio标签，然后调用document.getElementById()函数获得对应的audio对象。例如，定义audio标签的代码如下。

<audio id="audio1" src="music.wav" autoplay loop>
    您的浏览器不支持audio标签。
</audio>

获取对应audio对象的代码如下。

var media = document.getElementById('audio1');

（3）audio对象的属性

**audio对象的常用属性**
属性	具体描述
currentTime	设置或返回音频文件开始播放的位置，返回值以“秒”为单位
duration	返回播放音频的长度
src	音频文件的URL
volume	设置或返回音频文件的音量
networkState	当前的网络状态。0表示尚未初始化，1表示正常但没有使用网络，2表示正在下载数据，3表示没有找到资源
paused	是否暂停
ended	是否结束
autoPlay	是否自动播放
loop	是否循环播放
controls	是否显示默认控制条
muted	是否静音

演示currentTime属性的使用。

在网页中定义一个<audio>标签，代码如下。

<audio id="audio1" src="music.wav" controls>您的浏览器不支持audio标签。</audio>

定义一个“快进”按钮，定义按钮的代码如下。

<button id="foward" onclick="foward();">快进</button>

单击按钮foward将调用foward()函数。定义foward()函数的代码如下。

<script>
    function foward() {
        if (window.HTMLAudioElement) {
            var media = document.getElementById('audio1');
            media.currentTime += 1;
        }
    }
</script>

程序首先通过window.HTMLAudioElement判断浏览器是否支持<audio>标签，如果支持，则获取<audio>对象media，然后将media.currentTime加1。

再定义一个“倒回”按钮，定义按钮的代码如下。

<button id="rewind" onclick="rewind();">倒回</button>

单击按钮rewind将调用rewind()函数。定义rewind()函数的代码如下。

<script>
    function rewind() {
        if (window.HTMLAudioElement) {
            var media = document.getElementById('audio1');
            media.currentTime = 0;
        }
    }
</script>

（4）audio对象的方法

**audio对象的常用方法**
方法	具体描述
canPlayType	是否能播放指定格式的资源
load	加载src属性指定的资源
play	播放
pause	暂停

在网页中定义一个按钮，单击此按钮时，会播放music.wav。定义按钮的代码如下。

<button id="play" onclick="playAudio();">播放</button>

单击按钮play将调用playAudio()函数。定义playAudio()函数的代码如下。

<script>
    function playAudio() {
        if (window.HTMLAudioElement) {
            media = new Audio("music.wav");
            media.controls = false;
            media.play();
        }
    }
</script>

改进上述代码，播放音频后，将“播放”按钮改成“暂停”按钮，单击“暂停”按钮后，暂停播放，并将按钮改为“播放”按钮。

在网页中定义一个音频播放器，代码如下。

<audio id="audio1" src="music.wav">您的浏览器不支持audio标签。</audio>

定义“播放 / 暂停”按钮的代码如下。

<button id="play" onclick="playAudio();">播放</button>

初始时按钮标题为“播放”，单击按钮play将调用playAudio()函数。定义playAudio()函数的代码如下。

<script>
    function playAudio() {
        if (window.HTMLAudioElement) {
            var media = document.getElementById('audio1');
            var btn = document.getElementById('play');
            if (media.paused) {
                media.play();
                btn.textContent = "暂停";
            } else {
                media.pause();
                btn.textContent = "播放";
            }
        }
    }
</script>

（5）audio对象的事件

**audio对象的常用事件**
方法	具体描述
loadstart	开始申请数据
progress	正在申请数据
suspend	延迟下载
play	播放时触发
pause	暂停时触发
ended	播放结束
volumechange	改变音量

改进上述代码，当播放完音频后，将按钮标题改为“播放”。

在playAudio()函数中添加如下代码。

media.addEventListener("ended", playend, true);

即指定media对象的ended事件触发时调用playend()函数。定义playend()函数的代码如下。

function playend() {
    var btn = document.getElementById('play');
    btn.textContent = "播放";
}

2、HTML5视频

HTML5提供了在网页中播放视频的标准，支持<video>标签的浏览器可以不依赖其他插件播放视频。

1）video标签

在HTML5中，可以使用<video>标签定义一个视频播放器，语法如下。

<video src="视频文件">...</video>

src属性用于指定视频文件的URL。<video>标签支持的视频文件格式包括.Ogv、MPEG 4 和 WebM 等。<video>和</video>之间的字符串指定当浏览器不支持<video>标签时显示的字符串。

**<video>标签的主要属性**
属性	值	具体描述
autoplay	True或false	如果是true，则视频在就绪后马上播放
controls	True或false	如果是true，则向用户显示视频播放器控件，如播放按钮
end	数值	定义播放器在视频流中的何处停止播放。默认会播放到结尾
height	数值	视频播放器的高度，单位为像素
loop	True或false	如果是true，则视频会循环播放
loopend	数值	定义在视频流中循环播放停止的位置，默认为end属性的值
loopstart	数值	定义在视频流中循环播放的开始位置。默认为start属性的值
playcount	数值	定义视频片段播放多少次，默认为1
poster	url	在视频播放之前所显示的图片的URL
src	url	要播放的视频的URL
start	数值	定义播放器在视频流中开始播放的位置，默认从开头播放
width	数值	视频播放器的宽度，单位为像素

在HTML文件中定义一个<video>标签，用于播放指定的在线MP4文件，代码如下。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Test</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
    </style>
</head>

<body>

    <h1>video标签的例子</h1>
    <video src="video/POPSTAR.mp4" controls>
        您的浏览器不支持video标签。
    </video>

    <script>
    </script>

</body>

</html>

与<audio>标签一样，在<video>标签中，也可以使用<source>标签指定多个要播放的视频文件。语法如下。

<video>
    <source src="视频文件1">
    <source src="视频文件2">
    <source src="视频文件3">
    ……
</video>

改进上述代码，增加替换视频源，代码如下。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Test</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
    </style>
</head>

<body>

    <h1>video标签的例子</h1>
    <video controls>
        <source src="video/POPSTAR.mp4" type="video/mp4" />
        <source src="video/POPSTAR.ogv" type="video/ogv">
    </video>

    <script>
    </script>

</body>

</html>

2）使用JavaScript语言访问video对象

与音频处理一样，除了使用默认的播放器控制播放视频外，还可以在JavaScript程序中操作video对象。

（1）检测浏览器是否支持<video>标签

在JavaScript程序中操作video对象之前，通常需要检测浏览器是否支持<video>标签。如果支持，则可以对video对象进行操作。

可以通过document.createElement()方法创建一个video对象，如果成功，则表示浏览器支持<video>标签，否则表示不支持。

在网页中定义一个按钮，单击此按钮时，会检测浏览器是否支持<video>标签。定义按钮的代码如下。

<button id="check" onclick="check();">检测浏览器是否支持video标签</button>

单击按钮check将调用check()函数。定义check()函数的代码如下。

<script>
    function check() {
        if (supports_video()) {
            alert("您的浏览器支持video标签");
        } else {
            alert("您的浏览器不支持video标签");
        }
    }
</script>

supports_video()函数用于检测浏览器是否支持<video>标签，代码如下。

function supports_video() {
    return !!document.createElement('video').canPlayType;
}

（2）在JavaScript程序中获得video对象

与audio对象不同，video对象在任何情况下都是可见的。因此不需要使用new关键字创建video对象。

一般在需要HTML网页中定义一个<video>标签，然后调用document.getElementById()函数获取对应的audio对象。例如，定义<video>标签的代码如下。

<video id="video1" src="video/POPSTAR.mp4" controls>您的浏览器不支持video标签。</video>

获取对应video对象的代码如下。

var media = document.getElementById('video1');

（3）video对象的属性

**video对象的常用属性**
属性	具体描述
autoplay	设置或返回是否在加载完成后随即播放音频/视频
controls	设置或返回是否显示视频控件
currentSrc	返回当前视频的URL
currentTime	设置或返回视频文件开始播放的位置，返回值以“秒”为单位
duration	返回播放音频在某秒上的播放的长度
ended	是否结束
height	视频的高度
loop	是否循环播放
muted	是否静音
networkState	当前的网络状态。0表示尚未初始化，1表示正常但没有使用网络，2表示正在下载数据，3表示没有找到资源
paused	是否暂停
played	是否已播放
preload	设置或返回视频是否应该在页面加载后进行加载
src	设置或返回视频元素的当前来源
volume	设置或返回视频文件的音量
videoWidth	原始视频的宽度
videoHeight	原始视频的高度
width	视频的宽度

width属性和videoWidth属性的使用。

在网页中定义一个<video>标签，代码如下。

<video id="video1" src="video/POPSTAR.mp4" controls>您的浏览器不支持video标签。</video>

定义一个“小”按钮，定义按钮的代码如下。

<button id="MakeSmall" onclick="MakeSmall();">小</button>

单击按钮MakeSmall将调用MakeSmall()函数。定义MakeSmall()函数的代码如下。

<script>
    function supports_video() {
        return !!document.createElement('video').canPlayType;
    }
    function MakeSmall() {
        if (supports_video()) {
            var media = document.getElementById('video1');
            media.width = media.videoWidth/2;
        }
    }
</script>

程序将media.width设置为原始视频宽度的一半（media.videoWidth/2）。

再定义一个“正常”按钮，定义按钮的代码如下。

<button id="normal" onclick="MakeNormal();">正常</button>

单击按钮normal将调用MakeNormal()函数。定义MakeNormal()函数的代码如下。

function MakeNormal() {
    if (supports_video()) {
        var media = document.getElementById('video1');
        media.width = media.videoWidth;
    }
}

程序将media.width设置为原始视频宽度（media.videoWidth）。

最后定义一个“大”按钮，定义按钮的代码如下。

<button id="Big" onclick="MakeBig();">大</button>

单击按钮Big将调用MakeBig()函数。定义MakeBig()函数的代码如下。

function MakeBig() {
    if (supports_video()) {
        var media = document.getElementById('video1');
        media.width = media.videoWidth*2;
    }
}

程序将media.width设置为原始视频宽度的两倍（media.videoWidth*2）。

（4）video对象的方法

**video对象的常用方法**
方法	具体描述
canPlayType	能否播放指定格式的资源
load	加载src属性指定的资源
play	播放
pause	暂停

定义一个<video>标签，用于播放指定的MP4文件。单击视频画面则播放视频，再次单击则会暂停播放。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Test</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
    </style>
</head>

<body>

    <video id="video1" src="video/POPSTAR.mp4" controls>您的浏览器不支持video标签。</video>

    <script>
        var media = document.getElementById('video1');
        if (media.paused) {
            media.play();
        } else {
            media.pause();
        }
    </script>

</body>

</html>

（5）video对象的事件

**video对象的常用事件**
方法	具体描述
canplay	当浏览器可以播放音频/视频时
loadeddata	当浏览器已加载视频的当前帧时
loadstart	开始申请数据
progress	正在申请数据
suspend	延迟下载
play	播放时触发
pause	暂停时触发
ended	播放结束
volumechange	改变音量
waiting	当视频由于需要缓冲下一帧而停止

在网页中定义两个视频播放器，当播放视频1时，暂停视频2；当暂停视频1时，播放视频2。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Test</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
    </style>
</head>

<body>

    <video id="video1" src="video/POPSTAR.mp4" controls>您的浏览器不支持video标签。</video>
    <video id="video2" src="video/POPSTAR.mp4" controls>您的浏览器不支持video标签。</video>

    <script>
        function register() {
            var media1 = document.getElementById('video1');

            media1.addEventListener("play", pauseVideo2, true);
            media1.addEventListener("pause", playVideo2, true);
        }
        function pauseVideo2() {
            var media2 = document.getElementById('video2');
            media2.pause();
        }
        function playVideo2() {
            var media2 = document.getElementById('video2');
            media2.play();
        }
        window.addEventListener("load", register, true);
    </script>

</body>

</html>

3、视频播放插件video.js

Video.js是一个基于HTML5的视频播放器插件。

Video.js插件的使用方法很简单，首先可以使用下面的语句在线引用video.js脚本。

<script src="http://vjs.zencdn.net/5.8.8/video.js"></script>

如果希望在IE8中支持video.js播放器，则还需要使用下面的语句引用video.js脚本。

<script src="http://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script>

然后再使用下面的语句引用样式表文件。

<link rel="stylesheet" href="http://vjs.zencdn.net/5.8.8/video-js.css">

使用video.js插件的方法很简单，只需要在网页中定义一个class="video-js"的video元素。例如：

<video id="my-video" class="video-js" controls preload="auto" width="640" height="264" poster="images/picture.jpg" 
data-setup="{}">
    <source src="video/POPSTAR.mp4" type="video/mp4" >
    <source src="video/POPSTAR.mp4" type="video/mp4">
    <p class="vjs-no-js">
        To view this video please enable JavaScript, and consider upgrading to a web browser that
        <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
    </p>
</video>

参数说明如下。

preload：是否预加载视频，auto表示自动预加载。
width：播放器宽度。
poster：封面图。
source：视频源。
type：视频格式。

视频播放插件Video.js的使用。网页代码如下。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Test</title>
    <link rel="stylesheet" href="http://vjs.zencdn.net/5.8.8/video-js.css">
    <script src="http://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
    </style>
</head>

<body>

    <video id="my-video" class="video-js" controls preload="auto" width="640" height="264" poster="images/lurennvzhu.jpg" data-setup="{}">
        <source src="video/POPSTAR.mp4" type="video/mp4" >
        <source src="video/POPSTAR.mp4" type="video/mp4">
    </video>

    <script src="http://vjs.zencdn.net/5.8.8/video.js"></script>
    <script>
    </script>

</body>

</html>

即将入土的羸弱老年人

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
播放多媒体

在HTML5出现之前，要在网页中播放多媒体，需要借助Flash插件。浏览器在安装Flash插件后才能播放多媒体。使用HTML5提供的新标签<audio>和<video>可以很方便地在网页中播放音频和视频。1、HTML5音频HTML5提供了在网页中播放音频的标准，支持<audio>标签的浏览器可以不依赖其他插件播放音频。1）audio标签在HT...
复制链接

扫一扫

专栏目录