如何用js来控制video播放器

在文章开始前，先给大家看下效果图：

在文章开始，给大家先分享一下这个思路：

js来控制视频的播放：

1、所有的方法和属性都是由video这个dom元素来调用，如果换成其他的则不能实现

2、video.paused==true

3、video.play();

4、video.pause();

5、video.duration;video.currentTime();

6、video.ontimeUpdate=function()

7、 video.webkitRequestFullScreen();

代码部分，包含注释：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><link rel="stylesheet" href="./css/font-awesome.min.css"><style>* {margin: 0;padding: 0;}body {background-color: #000;}.box {width: 800px;margin: 100px auto;border: 1px solid #fff;}.control {width: 100%;height: 50px;background: #fff;display: flex;border-top: 1px solid #fff;}.control .right,   .control .left{flex-basis: 50px;background-color: #000;color: #fff;text-align: center;line-height: 50px;font-size: 20px;}.control .progress {flex: 1;}.control .current {width: 0%;height: 50px;background-color: gray;}</style>
</head>
<body><div class="box"><video src="./movie/bglb.mp4"></video><div class="control"><a class="left icon-play"></a><div class="progress"><div class="current"></div></div><a class="right icon-fullscreen"></a></div></div>
</body>
</html><script>//拿到video的dom元素var video = document.querySelector("video");//1. 点击暂停播放按钮的操作document.querySelector(".left").onclick = function() {//判断当前是处于暂停还是播放状态，如果是暂停状态，就播放， 如果是播放状态， 就暂停if (video.paused == true) {video.play();this.classList.add("icon-pause");this.classList.remove("icon-play");} else {video.pause();this.classList.remove("icon-pause");this.classList.add("icon-play");}}//2. 更新进度条（动态的设置进度条的div的宽度）//拿到视频的总时长，再拿到当前的播放的时间，求一个百分比，再把这个百分比设为css的width的值//当视频播放， 视频的进度更新时，就会调用video.ontimeupdate = function() {var percent = video.currentTime / video.duration * 100 + "%";console.log(percent);document.querySelector(".current").style.width = percent;}//3. 点击进度条，更新进度document.querySelector(".progress").onclick = function(target) {//拿到进度条的宽度var width = this.offsetWidth;//拿到当前点击位置的x坐标var x = target.offsetX;//比如说我的视频的总时长是60分钟， 当前时间 60 * x/widthvideo.currentTime = x / width * video.duration;}//4. 全屏的功能的实现document.querySelector(".right").onclick = function() {//进入全屏video.webkitRequestFullScreen();}</script>

如何用js来控制video播放器相关推荐

JS控制Video播放器（video详细介绍）(快进、后退、播放、暂停、音量大小)
JS控制Video播放器(video详细介绍)(快进.后退.播放.暂停.音量大小) 来源:https://blog.csdn.net/hh3167253066/article/details/1203 ...
JS控制Video播放器
原文链接思路: 一.首先监听触发事件. 比如:向上键对应的keyCode为38,向下键对应的keyCode为40,向左键对应的keyCode为37,向右键对应的keyCode为39,空格键对应的ke ...
JS 用CANVAS自定义VIDEO播放器
JS 用CANVAS自定义VIDEO播放器概述 CANVAS绘制核心代码播放器代码使用页面HTML代码使用页面JS代码使用示例概述 HTML5用规范的VIDEO标签取代了以往需要借助外部控 ...
微信中H5同层Video播放器接入教程
微信中H5同层Video播放器接入教程 x5-video-player-type 启用H5同层播放器通过video属性"x5-video-player-type"声明启用同层H5 ...
如何用FFmpeg编写一个简单播放器详细步骤介绍
如何用FFmpeg编写一个简单播放器详细步骤介绍(转载) FFMPEG是一个很好的库,可以用来创建视频应用或者生成特定的工具.FFMPEG几乎为你把所有的繁重工作都做了,比如解码.编码.复用和解复用. ...
玩转前端 Video 播放器
Web 开发者们一直以来想在 Web 中使用音频和视频,但早些时候,传统的 Web 技术不能够在 Web 中嵌入音频和视频,所以一些像 Flash.Silverlight 的专利技术在处理这些内容上变 ...
【Web技术】662- 玩转前端 Video 播放器
Web 开发者们一直以来想在 Web 中使用音频和视频,但早些时候,传统的 Web 技术不能够在 Web 中嵌入音频和视频,所以一些像 Flash.Silverlight 的专利技术在处理这些内容上变 ...
模拟video播放器
更新: 关于第二点,也就是说计算进度条拖放按钮定位的问题. 很感谢 batsing 同学提供了更好的方案: 滑块左偏量 = (进度条长 - 滑块长) * (已播时间/总时长) 尝试过之后发现除了拖曳滑 ...
在HarmonyOS中实现基于JS卡片的音乐播放器
/ 今日科技快讯 / 近日,苹果首席执行官蒂姆·库克接受<时代>杂志专访,谈及他本人对领导力.企业价值和新技术的看法.库克表示,苹果不仅要引领创新,还要努力让世界变得更安全更公平, ...

如何用js来控制video播放器

如何用js来控制video播放器相关推荐

最新文章

热门文章