zoukankan      html  css  js  c++  java
  • HTML5的音频播放和视频播放

    1.音频播放
    audio(音频)
    html5提供了播放音频文件的标准
     
    <audio src="anli.mp3" controls="controls">您的浏览器不支持</audio>
    自定义控件
     
    <button onclick="clickA()">播放/暂停</button>
    <audio src="anli.mp3" id="audio">您的浏览器不支持</audio>
    <script>
        var a=document.getElementById("audio");
        function clickA(){
            if(a.paused){
                a.play();
            }else{
                a.pause();
            }
        }
    </script>
    cotrol(控制器)
    control属性提供添加播放、暂停和音量控件
    标签
    <audio>     定义声音
    <source>     规定多媒体资源,可以是多个
    2.编解码工具
    针对不同浏览器支持的多媒体播放格式,我们需要编解码工具对多媒体格式进行转换。
    FFmpeg(一款免费开源的编解码工具)
    网址:www.ffmpeg.org
     
    3.视频播放
    video(视频)  :  HTML5提供了展示视频的标准
    control(控制器)  :  control 属性提供添加播放、暂停和音量控件
    标签 :  <video> 定义声音    <source> 规定多媒体资源,可以是多个
    属性 : width : 宽    height : 高
     
    <video src="anli.mp4" controls="controls">您的浏览器不支持</video>
    火狐浏览器不支持mp4格式,支持ogg格式
    <video controls="controls">
         <source src="anli.mp4">
         <source src="anli.ogg">
         您的浏览器不支持
    </video>
     
    自定义
     
    <button onclick="clickV()">播放/暂停</button>
    <button onclick="clickBig()">放大</button>
    <button onclick="clickSmall()">缩小</button>
    <br/>
    <video id="video" width="500" height="400">
         <source src="anli.mp4">
         <source src="anli.ogg">
         您的浏览器不支持
    </video>
    <script>
         var v=document.getElementById("video");
         function clickV(){
              if(v.paused){
                   v.play();
              }else{
                   v.pause();
              }
         }
         function clickBig(){
              v.width = 800;
              v.height = 800;
         }
         function clickSmall(){
              v.width = 300;
              v.height = 300;
         }
    </script>
  • 相关阅读:
    ZW网络团队及资源简介
    ZW云推客即将登场
    “4K云字库”基本框架图
    Sketch 55 Beta版本探秘,看看都有什么新功能
    产品经理有哪些类型?
    电影票APP原型设计分享– Movie Booking
    旅游类App的原型制作分享-Klook
    UI行业发展预测 & 系列规划的调整
    原来这就是 UI 设计师的门槛
    摹客PS插件全新改版!—— 智能检测不对应的设计稿
  • 原文地址:https://www.cnblogs.com/baixuemin/p/6495124.html
Copyright © 2011-2022 走看看