网页前端：网页视频应用

sky-stars

已于 2022-11-01 20:14:51 修改

阅读量916

点赞数 3

分类专栏：网页前端文章标签： html css html5

于 2021-11-22 00:01:00 首次发布

本文链接：https://blog.csdn.net/qq_51917985/article/details/121462527

版权

网页前端专栏收录该内容

7 篇文章 5 订阅

订阅专栏

文章目录

前言
具体操作
总结

前言

实验目的：
（1）掌握视频元素的使用方法； 
（2）加深多媒体在网页中应用的理解。
（3）掌握网页中视频播放的方法 
实验内容：
按照要求实现网页视频播放功能，具体如下图所示；
1.实现播放列表功能；
2.单击每个播放列表后，视频自动播放；
3.视频可以根据列表逐个播放。

具体操作

网页视频的应用.css

li{
    font-size: 30px;
}

a:hover{
    color: dodgerblue;
}
#video{
    width: 500px;
    height: 400px;
}

网页视频的应用.js

$(document).ready(function() {
    $("li a").click(function(){/*为每个a元素绑定单击事件*/
        var vLen = $('.video_list').length; // 播放列表的长度
        var curr = 0; // 当前播放的视频
        $("#video").on('ended', videoPlay);//侦听事件，视频播放完后调用videoPlay()方法
        videoPlay();
        function videoPlay() {
            for(var i=0;i<vLen;i++){
                var list = $('.video_list').eq(i);
                if(i === curr){
                    $('#video').attr("src",list.attr('value')); //切换视频链接
                    if (list.attr('value')=='../image/movie1.mp4'){
                        list.html('【正在播放】movie1');   //提示正在播放的视频
                    }
                    if (list.attr('value')=='../image/movie2.mp4'){
                        list.html('【正在播放】movie2');   //提示正在播放的视频
                    }
                }else{
                    list.html("<a>"+"movie"+(i+1)+"</a>");
                }
            }
            curr++;
            if (curr >= vLen) curr = 0; // 列表播放完，重新播放
        }
    });
});

html代码中使用到了jQuery库，关于它的下载与介绍请参考以下文章
https://blog.csdn.net/qq_51917985/article/details/121462896

网页视频的应用.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <!--引用jquery，jQuery 是一个 JavaScript 函数库-->
    <script src="../js/jquery-3.6.0.min.js"></script>
    <link rel="stylesheet" href="../css/网页视频的应用.css">
</head>
<body>

<video id="video" src="" controls="controls" autoplay="autoplay"></video>
<h1>播放列表：【请点击下列列表，开始循环播放】</h1>
<ul style="display:block" id="list">
    <li value="../image/movie1.mp4" class="video_list"><a>movie1</a></li>
    <li value="../image/movie2.mp4" class="video_list"><a>movie2</a></li>
</ul>
</body>
<script type="text/javascript" src="../js/网页视频的应用.js"></script>
</html>

目录结构
在这里插入图片描述
实验结果: 点击movie1或movie2开始循环播放视频

总结

本文部分代码引用此博客，感谢博主的贡献
https://blog.csdn.net/xiaojun201593/article/details/95970367

sky-stars

关注

3
点赞
踩
5

收藏

觉得还不错? 一键收藏
打赏
4
评论
网页前端：网页视频应用

实验目的：（1）掌握视频元素的使用方法；（2）加深多媒体在网页中应用的理解。（3）掌握网页中视频播放的方法实验内容：按照要求实现网页视频播放功能，具体如下图所示；1.实现播放列表功能；2.单击每个播放列表后，视频自动播放；3.视频可以根据列表逐个播放。
复制链接

扫一扫