html8 插入多媒体

最新推荐文章于 2022-09-13 22:55:45 发布

ZT黄

最新推荐文章于 2022-09-13 22:55:45 发布

阅读量601

点赞数

分类专栏：前端从0开始快速自学HTML/CSS/Javascript学习

本文链接：https://blog.csdn.net/weixin_44055272/article/details/88545437

版权

前端同时被 2 个专栏收录

43 篇文章 0 订阅

订阅专栏

从0开始快速自学HTML/CSS/Javascript学习

40 篇文章 0 订阅

订阅专栏

基本知识

什么叫插件

1.辅助应用程序（helper application）是可由浏览器启动的程序。辅助应用程序也称为插件。插件可以通过\ 标签或者 <embed> 标签添加在页面中。
2.可以用\ 标签或者 <embed> 标签插入插件，哪一种都行，但是注意embed提供的src属性，object提供的是data属性
并且object可以显示如果多媒体打不开的提示信息

<body>
    <embed src="test.jpg" height="200" width="400">
    <object data="test.jpg" height="200" width="400">无法加载图片</object>>

    <embed src="test.mp4" height="200" width="400">
    <object data="test.mp4" height="200" width="400">无法加载视频</object>>

    <embed src="test.mp4" height="200" width="400">
    <object data="test.mp4" height="200" width="400">无法加载音频</object>>
</body>

（1）两种标签的缺点
<1>一点进入页面视频和音频就开始播放，很烦，不能自动控制。
<2>有些浏览器不能够完全支持。

3.两个标签的区别
（1）object，是双标签，如果浏览器不支持所启动的插件，会显示标签对中的内容。
（2）embed，是单标签，即使浏览器不支持所启动的插件，也不会有任何反应。

多媒体是什么？

格式多媒体元素（比如视频和音频）存储于媒体文件中。

多媒体文件的格式有哪些

多媒体文件分为视频和音频，音频和视频都有很多的格式。这种格式说白了就是看起来相同视频或者音频文件，他的二进制组成不同。可以把它和字符编码效果理解为一样。
每种编码方式都有自己的好处。
http://www.runoob.com/html/html-media.html

插入音频多媒体

用插件直接插入

如果文件名找不到内容，默认显示一个黑色的不播放的框

<embed src="test.mp3" height="200" width="400">
<object data="test.mp3" height="200" width="400"></object>

用<audio>元素

有的旧版的浏览器不支持，可以选择文件的播放方式，从上到下匹配到哪一个播放哪一个

<audio width="320" height="240" controls>
    <source src="test.mp3" type="video/mp4">
    <source src="test.ogg" type="video/ogg">
    <source src="test.webm" type="video/webm">
    您的浏览器不支持 audio 标签。
</audio>

1.audio元素标签对。如果下面的多媒体文件来源都无法播放文件，则会显示其中的文字。
（1）width，height表示宽和高
（2）control表示出现进度条
（3）还可以有其他的参数

在这里插入图片描述
2.source单标签
（1）src表示文件的url
（2） type表示文件的格式
常见的 MIME（Multipurpose Internet Mail Extensions）类型：
视频： video/ogg video/mp4 video/webm
音频：audio/ogg audio/mpeg

比较完善的解决方案（针对不同版本的浏览器）

有的浏览器对于audio不支持，不同的浏览器可能对<object> 标签或者 <embed> 标签支持效果不同，为了使不管支持哪个标签的浏览器都能够播放，应该这样做。
如果能识别audio，就选择一种方式播放他，否则选择object方法播放他，如果还不行就选择sembed方法播放他。

<audio width="320" height="240" controls>
    <source src="test.mp3" type="video/mp4">
    <source src="test.ogg" type="video/ogg">
    <source src="test.webm" type="video/webm">
    <object data="test.mp3" width="320" height="240">
        <embed src="test.swf" width="320" height="240">
    </object>
</audio>

插入视频多媒体（与插入音频同理）

用插件直接插入

<embed src="test.mp4" height="200" width="400">
<object data="test.mp4" height="200" width="400"></object>

用<video>元素、

<video width="320" height="240" controls>
    <source src="test.mp4" type="video/mp4">
    <source src="test.ogg" type="video/ogg">
    <source src="test.webm" type="video/webm">
    您的浏览器不支持 video 标签。
</video>

比较完善的解决方案（针对不同版本的浏览器）、

<video width="320" height="240" controls>
    <source src="test.mp4" type="video/mp4">
    <source src="test.ogg" type="video/ogg">
    <source src="test.webm" type="video/webm">
    <object data="test.mp4" width="320" height="240">
        <embed src="test.swf" width="320" height="240">
    </object>
</video>

ZT黄

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html8 插入多媒体

基本知识什么叫插件1.辅助应用程序（helper application）是可由浏览器启动的程序。辅助应用程序也称为插件。插件可以通过\ 标签或者 &amp;amp;amp;lt;embed&amp;amp;amp;gt; 标签添加在页面中。2.可以用\ 标签或者 &amp;amp;amp;lt;embed&amp;amp;amp;gt; 标签插入插件3.两个标签的区别（1）object，是双标签，如果浏览器不支持所启动的插件，会显示标签对中的内容。
复制链接

扫一扫