java结合前端播放视频

转载

colddawn 2024-09-18 14:57:26

文章标签 java结合前端播放视频 html css ide 服务器 文章分类 Java 后端开发

前端学习笔记17-音视频播放

标签audio
标签source
embed
兼容
video
都是本地文件？

标签audio

audio：向网页中引入一个外部音频文件
音视频引入时，默认用户无法操作，得加controls属性。
autoplay属性设置是否自动播放（但是这个属性好像有问题，在打开页面时它会自动播放，但是刷新后不大行（我用的edge好像可以），视频老师说是用户体验问题，我也不细讲了。）
loop：是否循环播放

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内联框架</title>
</head>
<body>
    <audio src="./source/audio.mp3" controls autoplay loop></audio>
</body>
</html>

标签source

除了通过src来指定外部文件的路径以外，还可以通过source来指定文件的路径。
为什么有了audio还要source呢？当你的浏览器版本不兼容（zeal里可以查到）时，可以经过一些操作让我们知道。怎么操作呢？看下面代码。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内联框架</title>
</head>
<body>
    <audio controls>
    对不起，您的浏览器不支持播放音频！请升级浏览器！ 
        <source src="./source/audio.mp3">
        
    </audio>

</body>
</html>

当浏览器不支持audio和source是时，audio会被浏览器忽略掉，然后那段文字就会显示出来，如果支持，则那段文字不会被显示出来。看下图，因为我的浏览器是支持的，所以文字没有显示出来（我没有ie浏览器，没法想视频里一样测试不支持的情况）

java结合前端播放视频_css

使用cource还有一个好处，有一些浏览器不支持mp3，有一些则不支持ogg，这个时候我们可以两个都写进去，浏览器优先显示第一个，如果第一个失败了，则显示第二个。代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内联框架</title>
</head>
<body>
    <audio controls> 
        <source src="./source/audio.mp3">
        <source src="./source/audio.ogg">
    </audio>

</body>
</html>

embed

如视频里提到的，IE8不支持audio，为了让它能用，可以使用embed。
它的一个毛病就是会自动播放，另一个毛病是你不给它设置width和height的话你根本看不清它（实际上我的edge可以，但是好像IE就很小，得给它设置大小），没法关掉音乐。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内联框架</title>
</head>
<body>

    <embed src="./source/audio.mp3" type="audio/mp3" width="300" height="100">

</body>
</html>

兼容

embed使得老版本能用了，但是在edge看的时候变得好丑，用上面提到的方法，写成下面的样子，就可以在edge用audio和source，在IE8用embed了。

<audio controls>
        <source src="./source/audio.mp3">
        <source src="./source/audio.ogg">
        <embed src="./source/audio.mp3" type="audio/mp3" width="300" height="100">
    </audio>

video

video:向网页中引入视频文件
使用方法和audio基本相同，不详细说了，看代码。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内联框架</title>
</head>
<body>
    <video controls>
        <source src="./source/flower.webm">
        <source src="./source/flower.mp4">
        <embed src="./source/flower.mp4" type="video/mp4">
    </video>
</body>
</html>

效果：

java结合前端播放视频_ide_02