zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    一个十分诡异的NullReferenceException异常!
    如何去掉TabControl控件默认添加的TabPage
    GDI+发生一般性错误的解决方法
    C#中各种数组的性能比较
    酷享娱乐新生活
    关于ImageList.Images集合的特殊行为!
    WinForm窗体之间交互的一些方法
    实现单实例应用程序的三种方案
    MySql_Close 释放资源
    数组之List
  • 原文地址:https://www.cnblogs.com/blog-leo/p/4457689.html
Copyright © 2011-2022 走看看