前端学习笔记day01 html 标签之音频 embed+audio+video

最新推荐文章于 2024-05-03 17:58:21 发布

weixin_30271335

最新推荐文章于 2024-05-03 17:58:21 发布

阅读量368

点赞数

文章标签：前端 php ViewUI

原文链接：http://www.cnblogs.com/xuanxuanlove/p/10017341.html

版权

1. embed标签

有时候视频很大，我们不直接从本地导入到html中，而是从优酷上直接复制html代码即可；

2. 如果是一些小的视频文件可以借助video标签

2.1 <video src="视频地址 autoplay controls"> </video> -------标签内属性有src(视频的地址) autoplay(自动播放) controls(显示播放控件)

2.2 但是有的浏览器有可能不支持某些格式考虑到兼容性可以借助source标签写成如下形式：

<video autoplay controls>

<source src="Mp4格式的视频"> </source>

<source src="ogg格式的视频"> </source>

<source src="WebM格式的视频"> </source>

</video>

3. audio声音标签

3.1标准写法： <audio src="声音文件" autoplay controls loop="-1"> </audio> loop=-1代表无限循环播放;

3.2 如果有些浏览器不能兼容某些格式的生意可以写成:

<audio autoplay controls>

<source src="MP3格式的声音"> </source>

<source src="ogg格式的声音"> </source>

<source src="wav格式的声音"> </source>

</audio>

4. 代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <p>励志视频</p>
    <embed src='http://player.youku.com/player.php/sid/XMzY4MTIwMTEwNA==/v.swf' allowFullScreen='true' quality='high' width='480' height='400' align='middle' allowScriptAccess='always' type='application/x-shockwave-flash'></embed>
    <!-- 一般视频特别大时 我们不选择直接从本地加载到html 而是先把视频上传到优酷等然后直接复制html代码即可~ -->
    
    <p>下面是一段很好听的音乐~</p>
    <audio src="../../sound_video/DaysGoneBy.mp3" autoplay constrols loop="-1"></audio> <br/><br/><br/> 
     <!-- audio标签可以上传音频 autoplay 自动播放，controls会显示声音控件 loop="2"循环播放两次，-1代表无限循环 -->


    <!-- 有的浏览器不支持很多mp3格式的声音，需要考虑兼容性(一般写上mp3 ogg wav三种即可) -->
    <audio controls autoplay>
        <source src="../../sound_video/DaysGoneBy.mp3"/>
        <source src="另一种格式的声音.ogg"/>
        <source src="第三种格式的声音文件.wav">
    </audio>

    <video src="视频的地址" autoplay controls></video>

    <!-- 有的浏览器不支持某种格式的音频，可以考虑兼容性的写法： -->
    <video autoplay controls>
        <source src="mp4格式的视频地址（我没有视频，这里就不演示了）"/>
        <source src="ogg格式的视频地址（我没有视频，这里就不演示了）"/>
        <source src="WebM格式的视频地址（我没有视频，这里就不演示了）"/>
    </video>

</body>
</html>

View Code

运行结果：

转载于:https://www.cnblogs.com/xuanxuanlove/p/10017341.html

weixin_30271335

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
前端学习笔记day01 html 标签之音频 embed+audio+video

1. embed标签有时候视频很大，我们不直接从本地导入到html中，而是从优酷上直接复制html代码即可；2. 如果是一些小的视频文件可以借助video标签2.1 <video src="视频地址 autoplay controls"> </video> -------标签内属性有src(视频的地址) autoplay(自动播放) controls...
复制链接

扫一扫