向网页中插入音频和视频

最新推荐文章于 2024-05-07 00:32:04 发布

@全栈小白

最新推荐文章于 2024-05-07 00:32:04 发布

阅读量1.8k

点赞数 3

分类专栏：笔记本文章标签：通过html5向网页

本文链接：https://blog.csdn.net/kuaixiangzi/article/details/44586767

版权

笔记本专栏收录该内容

2 篇文章 0 订阅

订阅专栏

案列1

向网页中插入视频

1.加入一个vidio标签，设置宽高
2.设置src路径，从本地加载视频到网页中
3.autoplay视频自动播放
4.controls显示视频控件
5.loop视频结束后循环播放
6.也可以通过后面的button按钮设置暂停，继续

<body>
        <video src="video/iceage4.mp4" width="500" height="300" id="movie"
           autoplay="autoplay" controls="controls" loop="loop">
        </video>
        <button onclick="pause1()" id="paused">暂停</button>
    <script type="text/javascript">
        var i=1;
        function pause1(){
            var movie=document.getElementById("movie");
            var paused=document.getElementById("paused")
            if(i==1){
                movie.pause();
                paused.innerHTML="继续";
                i=0;
            }else{
                movie.play();
                paused.innerHTML="暂停";
                i=1;
            }


        }
    </script>
    </body>

案例2

网页中插入音频

1.加入一个audio标签，设置宽高
2.设置src路径，从本地加载视频到网页中
3.autoplay视频自动播放
4.controls显示视频控件
5.loop视频结束后循环播放

<body>
        <audio src="video/song.mp3" controls="controls" autoplay="autoplay" loop="loop" id="music"></audio>
        <body>

        <button onclick="pause1()" id="paused">暂停</button>
    <script type="text/javascript">
        var i=1;
        function pause1(){
            var music=document.getElementById("music");
            var paused=document.getElementById("paused")
            if(i==1){
                music.pause();
                paused.innerHTML="继续";
                i=0;
            }else{
                music.play();
                paused.innerHTML="暂停";
                i=1;
            }
        }
    </script>
    </body>

@全栈小白

关注

3
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
向网页中插入音频和视频

案列1向网页中插入视频1.加入一个vidio标签，设置宽高2.设置src路径，从本地加载视频到网页中3.autoplay视频自动播放4.controls显示视频控件5.loop视频结束后循环播放6.也可以通过后面的button按钮设置暂停，继续<body> <video src="video/iceage4.mp4" width="500" height="300" id
复制链接

扫一扫