HTML5-Video & Audio

HTML5-Video & Audio


 

<!DOCTYPE html>

<html>



    <head>

        <meta charset="utf-8" />

        <title>HTML5-Video & Audio</title>

    </head>



    <body>



        <div style="text-align:center;">

            <button onclick="playPause()">播放/暂停</button>

            <button onclick="makeBig()"></button>

            <button onclick="makeNormal()"></button>

            <button onclick="makeSmall()"></button>

            <br />

            <!-- 视频 -->

            <!--使用了 4 中不同的视频格式。HTML 5 <video> 元素会尝试播放以 mp4、ogg 或 webm 格式中的一种来播放视频。如果均失败,则回退到 <embed> 元素。-->

            <video id="video1" width="320" style="margin-top:15px;" controls="controls">

                <source src="movie.mp4" type="video/mp4" />

                <source src="movie.ogg" type="video/ogg" />

                <source src="movie.webm" type="video/webm" />

                <object data="movie.mp4" width="320" height="240">

                    <embed src="movie.swf" width="320" height="240" />

                </object>

                Your browser does not support HTML5 video.

            </video>

            <br />

            <!-- 音频 -->

            <audio controls="controls">

                <source src="song.ogg" type="audio/ogg">

                <source src="song.mp3" type="audio/mpeg">

                Your browser does not support the audio tag.

            </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 makeSmall() {

                myVideo.width = 320;

            }



            function makeNormal() {

                myVideo.width = 420;

            }

        </script>



    </body>



</html>

 

你可能感兴趣的:(html5)