zoukankan      html  css  js  c++  java
  • video视频,audio音频基础学习

    最近在系统的学习HTML5的新功能,做了些基础了练习

    主要是播放/暂停:play();  pause();

    <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style>
    #video1{
            margin-top:10px;
        }
    audio{
            margin-top:20px;
            320px;
        }
    </style>
    </head>
    <body>
        <div style="text-align:center;">
            <button onclick="playPause()">play/pause</button>
            <button onclick="makeBig()">lg</button>
            <button onclick="makeNormal()">md</button>
            <button onclick="makeSmall()">sm</button></br>
            <!-- <video controls="controls" autoplay="autoplay" loop="loop" width="320" height="240"> -->
            <video id="video1" width="320">
                <source src="http://www.w3school.com.cn/i/movie.ogg" type="video/ogg">
                <source src="http://www.w3school.com.cn/i/movie.mp4" type="video/mp4">
            </video></br>
            <audio controls="controls">
              <source src="http://www.w3school.com.cn/i/song.ogg" type="audio/ogg">
              <source src="http://www.w3school.com.cn/i/song.mp3" type="audio/mpeg">
            </audio>
        </div>
        <script type="text/javascript">
        var myVideo=document.getElementById("video1");
        function playPause(){
            if(myVideo.paused){
                myVideo.play();
            }else{
                myVideo.pause();
            }
            }
        function makeBig(){
            myVideo.width=560;
        }
        function makeNormal(){
            myVideo.width=420;
        }
        function makeSmall(){
            myVideo.width=320;
        }
        </script>    
    </body>
    </html>

  • 相关阅读:
    假期周总结报告(五)
    java 原码反码及补码 总结
    java ==与equals()方法的总结
    java String 类型总结
    java 全局变量 的小结
    java static语句的总结
    ATM开学测试(未完成)
    第七周学习进度总结
    第六周学习进度总结
    第五周学习进度总结
  • 原文地址:https://www.cnblogs.com/wu-Chihiro/p/5854047.html
Copyright © 2011-2022 走看看