码迷,mamicode.com
首页 > Web开发 > 详细

HTML5-Video & Audio

时间:2015-04-26 15:00:51      阅读:183      评论:0      收藏:0      [点我收藏+]

标签:

技术分享


 

<!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-Video & Audio

标签:

原文地址:http://www.cnblogs.com/blog-leo/p/4457689.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!