H5 Video&Audio

<!-- 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文件同一级目录下。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 视/音频的发展 标签的作用是在HTML页面中嵌入多媒体元素 标签的作用是在HTML页面中嵌入多媒体元素 问题:...
    闫子扬阅读 3,146评论 0 0
  • 今天把之前项目中遇到的关于视频、音频方面的坑给大家罗列一下,防止大家以后在泥潭中挣扎。(坑太多,必不全,欢迎大家补...
    你的个性很有趣阅读 4,079评论 2 6
  • 一、如何使用HTML实现视频处理 video标签 如果当前浏览器不支持video,可以在veido里面编写...
    云音流阅读 6,052评论 0 2
  • 声明: 学习资源来源于 HTML 5 视频,本人只是学习一下. H5是HTML、XHTML以及HTML DOM的新...
    想跳舞的蚂蚁阅读 2,405评论 0 1
  • video 元素支持三种视频格式 Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文...
    Zd_silent阅读 1,855评论 0 0

友情链接更多精彩内容