zoukankan      html  css  js  c++  java
  • 前端学习笔记day01 html 标签之音频 embed+audio+video

    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

    运行结果:

     

  • 相关阅读:
    ADO.NET Entity Framework之ObjectQuery
    高效byte[]和string互转的方法
    异步邮件发送
    ADO.NET Entity Framework之ObjectContext
    【转】Memcache and Mongodb
    一周工作总结一次SQL优化记录
    Ubuntu下有关Java和数据库的一些工作记录(一)
    自定义函数,替换字符串中指定位置的字符
    一次优化记录
    对比shrink和move
  • 原文地址:https://www.cnblogs.com/xuanxuanlove/p/10017341.html
Copyright © 2011-2022 走看看