Javascript实现视频文件播放功能(示例详解)

更新时间：2023年10月11日 11:21:15 作者：Meteor.792

这篇文章主要介绍了Javascript实现视频文件播放功能,使用CSS完成相应的布局样式,利用JavaScript函数来监听进度条,然后使用鼠标点击按钮实现对视频的播放,需要的朋友可以参考下

应用CSS基础和JavaScript的函数功能，制作一个视频播放器。使用CSS完成相应的布局样式，利用JavaScript函数来监听进度条，然后使用鼠标点击按钮实现对视频的播放。

CSS部分：

<style>
        * {
            margin: 0;
            padding: 0;
        }
        .body{
            height: 100%;
            width: 100%;
            background-image: url(风景.jpg);
            position: fixed;
        }
        figcaption {
            text-align: center;
            font-family: "Microsoft YaHei";
            font-size: 24px;
            font-weight: 700;
            line-height: 150px;
        }
        .player {
            width:640px;
            height:360px;
            margin: 10px auto;
            background-color: pink;
            background:url("login_on.gif")
            top center no-repeat;
            background-size: auto 100%;
            position: relative;
            border-radius: 10px;
            overflow: hidden;
        }
        .player video {
            height:100%;
            display: block;
            margin: 0px auto;
            display: block;
        }
        .controls {
            width: 620px;
            height:40px;
            background-color: black;
            position: absolute;
            left: 10px;
            bottom: 10px;
            border-radius: 10px;
        }
        .switch {
            width: 20px;
            height: 20px;
            position: absolute;
            top:10px;
            left: 10px;
            display: block;
            text-align: center;
            line-height: 20px;
            color: yellow;
        }
        .progerss {
            width: 400px;
            height:10px;
            position: absolute;
            background-color:beige;
            left: 40px;
            top:15px;
            border-radius: 4px;
            overflow: hidden;
        }
        .cur-progress {
            width:0%;
            height:100%;
            background: yellow;
        }
        .time {
            width: 120px;
            height: 20px;
            text-align: center;
            line-height: 20px;
            position: absolute;
            left: 450px;
            top:10px;
            font-size: 12px;
            color: #fff;
        }
        .exted {
            width: 20px;
            height: 20px;
            position: absolute;
            top:10px;
            right: 10px;
            text-align: center;
            line-height: 20px;
            color: yellow;
        }
    </style>
<style>
        * {
            margin: 0;
            padding: 0;
        }
        .body{
            height: 100%;
            width: 100%;
            background-image: url(风景.jpg);
            position: fixed;
        }
        figcaption {
            text-align: center;
            font-family: "Microsoft YaHei";
            font-size: 24px;
            font-weight: 700;
            line-height: 150px;
        }
        .player {
            width:640px;
            height:360px;
            margin: 10px auto;
            background-color: pink;
            background:url("login_on.gif")
            top center no-repeat;
            background-size: auto 100%;
            position: relative;
            border-radius: 10px;
            overflow: hidden;
        }
        .player video {
            height:100%;
            display: block;
            margin: 0px auto;
            display: block;
        }
        .controls {
            width: 620px;
            height:40px;
            background-color: black;
            position: absolute;
            left: 10px;
            bottom: 10px;
            border-radius: 10px;
        }
        .switch {
            width: 20px;
            height: 20px;
            position: absolute;
            top:10px;
            left: 10px;
            display: block;
            text-align: center;
            line-height: 20px;
            color: yellow;
        }
        .progerss {
            width: 400px;
            height:10px;
            position: absolute;
            background-color:beige;
            left: 40px;
            top:15px;
            border-radius: 4px;
            overflow: hidden;
        }
        .cur-progress {
            width:0%;
            height:100%;
            background: yellow;
        }
        .time {
            width: 120px;
            height: 20px;
            text-align: center;
            line-height: 20px;
            position: absolute;
            left: 450px;
            top:10px;
            font-size: 12px;
            color: #fff;
        }
        .exted {
            width: 20px;
            height: 20px;
            position: absolute;
            top:10px;
            right: 10px;
            text-align: center;
            line-height: 20px;
            color: yellow;
        }
    </style>

HTML部分：

<body class="body">
     <figure>
        <figcaption>视频播放</figcaption>
        <div class="player">
            <video src="商丘古城--夜景.mp4"></video>
            <div class="controls">
                <a href="#" rel="external nofollow"  rel="external nofollow"  class="switch icon-play" title="播放"></a>
                <div class="progerss">
                    <div class="cur-progress"></div>
                </div>
                <div class="time">
                    <span class="curr-time">00:00:00</span>/
                    <span class="total-time">00:00:00</span>
                </div>
                <a href="#" rel="external nofollow"  rel="external nofollow"  class="exted icon-fullscreen" title="全屏"></a>
            </div>
        </div>
    </figure>
</body>

Javascript部分：

<script>
        var video = document.querySelector("video")
        var playBtn = document.querySelector(".switch");
        var crrProgress = document.querySelector(".cur-progress");
        var crrTime = document.querySelector(".curr-time");
        var totalTime = document.querySelector(".total-time");
        var exted = document.querySelector(".exted");
        var tTime;
        var cTime;
        playBtn.onclick = function () {
            if(video.paused){
                video.play();
                this.classList.remove("icon-play");
                this.classList.add("icon-pause");
                playBtn.title = "暂停";
            }else{
                video.pause();
                this.classList.remove("icon-pause");
                this.classList.add("icon-play");
                playBtn.title = "播放";
            }
        }
        video.oncanplay = function () {
            tTime = video.duration;
            var h = Math.floor(tTime / 3600);
            var m = Math.floor(tTime % 3600 / 60);
            var s = Math.floor(tTime % 60);
            h = h >= 10 ? h :"0" + h;
            m = m >= 10 ? m :"0" + m;
            s = s >= 10 ? s :"0" + s;
            totalTime.innerHTML = h + ":" + m + ":" + s;
        }
        video.ontimeupdate = function () {
            cTime = video.currentTime;
            var h = Math.floor(cTime / 3600);
            var m = Math.floor(cTime % 3600 / 60);
            var s = Math.floor(cTime % 60);
            h = h >= 10 ? h :"0" + h;
            m = m >= 10 ? m :"0" + m;
            s = s >= 10 ? s :"0" + s;
            crrTime.innerHTML = h + ":" + m + ":" + s;
            var value = cTime / tTime;
            crrProgress.style.width = value * 100 + "%";
        }
        exted.onclick = function () {
            video.webkitRequestFullScreen();
        }
</script>

效果图：

JavaScript介绍：

JavaScript（简称“JS”）是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名，但是它也被用到了很多非浏览器环境中，JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式、声明式、函数式编程范式。

JavaScript在1995年由Netscape公司的Brendan Eich，在网景导航者浏览器上首次设计实现而成。因为Netscape与Sun合作，Netscape管理层希望它外观看起来像Java，因此取名为JavaScript。但实际上它的语法风格与Self及Scheme较为接近。

JavaScript的标准是ECMAScript 。截至 2012 年，所有浏览器都完整的支持ECMAScript 5.1，旧版本的浏览器至少支持ECMAScript 3 标准。2015年6月17日，ECMA国际组织发布了ECMAScript的第六版，该版本正式名称为 ECMAScript 2015，但通常被称为ECMAScript 6 或者ES2015。

JavaScript脚本语言具有以下特点:

（1）脚本语言。JavaScript是一种解释型的脚本语言，C、C++等语言先编译后执行，而JavaScript是在程序的运行过程中逐行进行解释。

（2）基于对象。JavaScript是一种基于对象的脚本语言，它不仅可以创建对象，也能使用现有的对象。

（3）简单。JavaScript语言中采用的是弱类型的变量类型，对使用的数据类型未做出严格的要求，是基于Java基本语句和控制的脚本语言，其设计简单紧凑。

（4）动态性。JavaScript是一种采用事件驱动的脚本语言，它不需要经过Web服务器就可以对用户的输入做出响应。在访问一个网页时，鼠标在网页中进行鼠标点击或上下移、窗口移动等操作JavaScript都可直接对这些事件给出相应的响应。

（5）跨平台性。JavaScript脚本语言不依赖于操作系统，仅需要浏览器的支持。因此一个JavaScript脚本在编写后可以带到任意机器上使用，前提是机器上的浏览器支持JavaScript脚本语言，JavaScript已被大多数的浏览器所支持。不同于服务器端脚本语言，例如PHP与ASP，JavaScript主要被作为客户端脚本语言在用户的浏览器上运行，不需要服务器的支持。所以在早期程序员比较倾向于使用JavaScript以减少对服务器的负担，而与此同时也带来另一个问题，安全性。

到此这篇关于Javascript实现视频文件播放功能的文章就介绍到这了,更多相关js视频文件播放内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

JS动画定时器知识总结
这篇文章给大家总结了关于JS动画中定时器的相关用法以及相关知识点总结，有需要的朋友可以参考学习下。
2018-03-03
彻底理解JavaScript的原型与原型链
原型和原型链是js中的难点也是重点,明白了原型和原型链会让我们在后面不管是学习还是工作都会更加高效,这篇文章主要给大家介绍了关于JavaScript原型与原型链的相关资料,需要的朋友可以参考下
2021-10-10
JS实现获取自定义属性data值的方法示例
这篇文章主要介绍了JS实现获取自定义属性data值的方法,结合实例形式较为详细的分析了javascript针对自定义属性data的相关操作技巧,需要的朋友可以参考下
2018-12-12
IE和Firefox在JavaScript应用中的兼容性探讨
今天在使用CSS属性的时候发现"cursor:hand;"在Firefox中鼠标不会变为手型，后来上网搜索了一下资料，发现hand这个cursor属性在Firrefox中不兼容，使用"cursor:pointer"就都可以显示了。
2008-04-04
JavaScript学习笔记之数组基本操作示例
这篇文章主要介绍了JavaScrip学习笔记之数组基本操作,结合实例形式分析了javascript数组的基本定义、添加、删除、修改、连接、排序等操作技巧,需要的朋友可以参考下
2019-01-01
使用taro开发微信小程序遇到的坑总结
Taro，京东凹凸实验室出品的适配多端的一个框架，这篇文章主要介绍了使用taro开发微信小程序遇到的坑总结,需要的朋友可以参考下
2019-04-04
JavaScript模块化原理深入分析
JavaScript中的模块化是指将每个js文件会被认为单独一个的模块。模块之间是互相不可见的。如果一个模块需要使用另一个模块，那么需要通过指定语法来引入要使用的模块，而且只能使用引入模块所暴露的内容
2022-11-11
input禁止键盘及中文输入,但可以点击
这篇文章主要介绍了<input>禁止键盘及中文输入,但可以点击。需要的朋友可以过来参考下，希望对大家有所帮助
2014-02-02
js函数参数设置默认值的一种变通实现方法
js函数中有个储存参数的数组arguments，因此js版支持参数默认值的函数可以通过另外一种变通的方法实现
2014-05-05
JavaScript实现Tab栏切换特效
这篇文章主要为大家详细介绍了JavaScript实现Tab栏切换特效，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-06-06

Javascript实现视频文件播放功能(示例详解)

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具