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>

  • 相关阅读:
    hdu4998 旋转坐标系
    hdu4998 旋转坐标系
    hdu5012 水搜索
    hdu5012 水搜索
    hdu5007 小水题
    ZOJ 3645 BiliBili 高斯消元 难度:1
    ZOJ 3654 Letty's Math Class 模拟 难度:0
    ZOJ 3647 Gao the Grid dp,思路,格中取同一行的三点,经典 难度:3
    ZOJ 3646 Matrix Transformer 二分匹配,思路,经典 难度:2
    ZOJ 3644 Kitty's Game dfs,记忆化搜索,map映射 难度:2
  • 原文地址:https://www.cnblogs.com/wu-Chihiro/p/5854047.html
Copyright © 2011-2022 走看看