美文网首页H5
H5 Video&Audio

H5 Video&Audio

作者: Fisher123 | 来源:发表于2018-03-27 15:28 被阅读9次
<!-- HTML5(视频) <video> 元素支持三种视频格式: MP4, WebM, 和Ogg -->
<video width="640" height="480" controls>
    <source src="iphone-x.mp4" type="video/mp4">
       您的浏览器不支持Video标签
</video>

<!-- HTML5视频demo -->
<div style="text-align:center">
    <button onclick="playPause()">播放/暂停</button>
    <button onclick="makeBig()">放大</button>
    <button onclick="makeSmall()">缩小</button>
    <button onclick="makeNormal()">普通</button>
   <br>
   <video id="video1" width="420">
           <source src="mov_bbb.mp4" type="video/mp4">
               您的浏览器不支持HTML5 video标签。
   </video>       
</div>

<script>
    var myVideo = document.getElementById("video1");
    //  播放/暂停
    function playPause() {
        if (myVideo.paused) {
            myVideo.play();
        } else {
            myVideo.pause();
        }   
    }
    // 放大
    function makeBig() {
        myVideo.width = 560;     
    }
    // 缩小
    function makeSmall() {
        myVideo.width = 320;     
    }
    // 普通
    function makeNormal() {
        myVideo.width = 420;     
    }
</script>

 <!-- HTML5音频Audio <audio>元素支持三种音频格式文件: MP3, Wav, 和Ogg -->
<audio controls>
   <source src="说散就散.mp3" type="audio/mp3">
       您的浏览器不支持HTML5 audio标签。
</audio>

// 音频和视频文件放在html文件同一级目录下。

相关文章

  • H5 Video&Audio

  • H5新标签audio&video

    H5新标签audio&video audio controls显示播放器页面(默认隐藏) autoplay自动播放...

  • ## HTML基础-多媒体标签

    ## HTML基础-多媒体标签 # video标签 # audio标签 # marquee标签(跑马灯) H5新增...

  • h5

    controls---控制台---用在video audio canvas----画图-js来配合操作 H5新标签...

  • html5新特性及常见问题

    h5新特性 用于绘画canvas元素 用于媒介回放的video和audio元素 本地离线存储localStorag...

  • 关于H5(3)

    H5里音视频小例子: 1:视频:video(css) 2:video (js控制) 3:文件拖拽 4:音频:audio

  • h5新特性和viewport

    h5新特性 于绘画的 canvas 元素 用于媒介回放的 video 和 audio 元素 对本地离线存储的更好的...

  • 第四天h5,css3

    h5新特性 用于绘画的 canvas 元素用于媒介回放的 video 和 audio 元素对本地离线存储的更好的支...

  • HTML5元素

    h5元素大致的分为下面几大类: 1.内嵌------在文档中添加其他类型的内容,如audio,video,canv...

  • 网页 H5 播放音频 audio 问题记录

    h5 标签 audio 不允许在没有用户操作时进行自动自动播放。否则会报一个 DOMException: play...

网友评论

    本文标题:H5 Video&Audio

    本文链接:https://www.haomeiwen.com/subject/qahscftx.html