HTML5+CSS3+JavaScript从入门到精通-06

原创

qiqi_fu

发布于 2021-12-03 14:24:57

4500

发布于 2021-12-03 14:24:57

文章被收录于专栏：CQ品势CQ品势

HTML5+CSS3+JavaScript从入门到精通

作者：王征，李晓波

第六章 HTML网页中的音频和视频

案例

06-01 利用audio元素播放音频

<!DOCTYPE html>
<!--web06-01-->
<!--
    audio元素，可播放类型有 mp3,wav, ogg
    controls:显示音频控件(比如播放、暂停按钮)
    autoplay:设置自动播放
    loop:循环播放
    -->
<html>
<head>
    <meta charset="utf-8" />
    <title>利用audio元素播放音频</title>
</head>
<body>
    <h3 align="center">利用audio元素播放音频</h3>
    <hr />
    <p align="center">花海飞歌：<audio src="file:///E:\WEB\Case\mp3mp4\CH002.mp3" controls autoplay></audio></p>
    <p align="center">祖国像妈妈一样：<audio src="file:///E:\WEB\Case\mp3mp4\CH003.mp3" controls></audio></p>
    <p align="center">时间都去哪儿了:<audio src="file:///E:\WEB\Case\mp3mp4\CH004.mp3" controls loop></audio></p>
</body>
</html>

06-02 利用video元素播放视频

<!DOCTYPE html>
<!--web06-02-->
<!--
    video元素支持三种格式：mp4, webM, Ogg
    controls, autoplay, loop, width, height,poster(视频播放之前显示的图像)
    -->
<html>
<head>
    <meta charset="utf-8" />
    <title>利用video元素播放视频</title>
</head>
<body>
    <h3 align="center">利用video元素播放视频</h3>
    <hr />
    <p align="center">
        <video src="file:///E:\WEB\Case\mp3mp4\Clip.mp4" width="600" height="400" controls></video>
    </p>
</body>
</html>

06-03 利用video元素解决浏览器播放视频的兼容问题

<!DOCTYPE html>
<!--web06-03-->
<!--
    source元素允许程序员规定两个视频文件，供浏览器根据它对媒体类型或编解码器的支持进行选择
    -->
<html>
<head>
    <meta charset="utf-8" />
    <title>利用video元素解决浏览器播放视频的兼容问题</title>
</head>
<body>
    <h3 align="center">利用video元素解决浏览器播放视频的兼容问题</h3>
    <hr />
    <p align="center">
        <!--当在source中使用了src,那么在video中就不能使用src属性了-->
        <video width="600" height="400" controls>
            <source src="file:///E:\WEB\Case\mp3mp4\Clip.mp4" type="video/mp4" />
            <source src="file:///E:\WEB\Case\mp3mp4\Clip_new.mpg" type="video/ogg" />
        </video>
    </p>
</body>
</html>

06-04 自定义按钮实现视频的控制操作

<!DOCTYPE html>
<!--web06-04-->
<html>
<head>
    <meta charset="utf-8" />
    <title>自定义按钮实现视频的控制操作</title>
</head>
<body>
    <h3 align="center">自定义按钮实现视频的控制操作</h3>
    <hr />
    <p align="center">
        <button onclick="playPause()">播放/暂停</button>
        <button onclick="makeBig()">放大</button>
        <button onclick="makeSmall()">缩小</button>
        <button onclick="makeNormal()">正常</button>、
        <br /><br />
        <video id="video1" src="file:///E:\WEB\Case\mp3mp4\Clip.mp4" width="420"></video>
    </p>
    <script>
        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>

06-05 利用embed元素嵌入Flash动画

<!DOCTYPE html>
<!--web06-05-->
<!--
    Flash动画： .fla - 动画编辑格式   .swf可直接播放的动画
    -->
<html>
<head>
    <meta charset="utf-8" />
    <title>利用embed元素嵌入Flash动画</title>
</head>
<body>
    <h3 align="center">利用embed元素嵌入Flash动画</h3>
    <hr />
    <p align="center"><embed src="mp3mp4/FBREAK.swf" width="400" height="200" /></p>
    <p align="center"><embed src="mp3mp4/Win.swf" width="400" height="200" /></p>
</body>
</html>

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

html