前端基础（三十、HTML5 视频音频）

最新推荐文章于 2023-10-26 09:03:52 发布

小鱼干儿er

最新推荐文章于 2023-10-26 09:03:52 发布

阅读量179

点赞数

分类专栏：前端学习文章标签： javascript html5 视频处理前端 html

本文链接：https://blog.csdn.net/qq_45689821/article/details/114224384

版权

前端学习专栏收录该内容

39 篇文章 2 订阅

订阅专栏

三十、HTML5 视频音频

前言
视频
音频

前言

HTML5提供了支持音视频播放的标签

视频

<video></video>

在video标签中，控制视频的宽度用 width="500" 而不用style的内联样式
在video标签中，controls = "controls" 代表出现视频下方的进度条、播放暂停、音量调节等功能
我们通过DOM控制video
常用的属性有
- paused：返回视频是否处于暂停状态
- ended：返回视频播放是否结束
- volumn：设置或返回视频音量(最大为1，最小为0，初始状态为1，即最大音量)
常用的方法有
- play()：使视频播放
- pause()：使视频暂停
- load()：重新加载

<body>
    <button id="pause" onclick="pause()">播放/暂停</button>
    <button onclick="increase()">增大音量</button>
    <button onclick="decrease()">减小音量</button>
    <div>
        <video id="myVideo" src="./video/Taylor Swift-willow(蓝光).mp4" width="500" controls = "controls"></video>
    </div>

    <script>
        var myVideo = document.querySelector("#myVideo");
        function pause() {
            if (myVideo.paused) {
                myVideo.play();
            } else {
                myVideo.pause();
            }
        }
        function increase(){
            console.log(myVideo.volume);
            myVideo.volume = myVideo.volume+0.05;
            if(myVideo.volume == 1){
                alert("音量已达到最大！")
                return
            }
        }
        function decrease(){
            console.log(myVideo.volume);
            myVideo.volume = myVideo.volume-0.05;
            if(myVideo.volume == 0){
                alert("音量已达到最小！")
                return
            }
        }
    </script>
</body>

video

(CSDN目前我上传不了带声音的视频呀！ o(TωT)o 我上传的都是gif动图，小伙伴们可以自己尝试呀)

音频

<audio></audio>
音频的播放与视频的播放几乎相同
如下代码与上面视频的代码是相同的，只是修改了资源文件

<body>
    <button id="pause" onclick="pause()">播放/暂停</button>
    <button onclick="increase()">增大音量</button>
    <button onclick="decrease()">减小音量</button>
    <div>
        <audio id="myMusic" src="./music/The Man - Taylor Swift.mp3" width="500" controls = "controls"></audio>
    </div>

    <script>
        var myMusic = document.querySelector("#myMusic");
        function pause() {
            if (myMusic.paused) {
                myMusic.play();
            } else {
                myMusic.pause();
            }
        }
        function increase(){
            console.log(myMusic.volume);
            myMusic.volume = myMusic.volume+0.05;
            if(myMusic.volume > 0.99){
                alert("音量已达到最大！")
                return
            }
        }
        function decrease(){
            console.log(myMusic.volume);
            myMusic.volume = myMusic.volume-0.05;
            if(myMusic.volume < 0.01){
                alert("音量已达到最小！")
                return
            }
        }
    </script>
</body>

audio

(๑′ᴗ‵๑)爱你~

以上为本萌新个人总结，如有不当之处望指正，有问题可以联系
邮箱：yuna_03@163.com或
QQ：2635591841

更于2021.2.28

小鱼干儿er

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
前端基础（三十、HTML5 视频音频）

三十、HTML5 视频音频前言视频音频前言HTML5提供了支持音视频播放的标签视频<video></video>在video标签中，控制视频的宽度用 width="500" 而不用style的内联样式在video标签中，controls = "controls" 代表出现视频下方的进度条、播放暂停、音量调节等功能我们通过DOM控制video常用的属性有paused：返回视频是否处于暂停状态ended：返回视频播放是否结束volumn：设置或返回视频音量(最
复制链接

扫一扫