前端html + js视频播放器（快进，快退，倍速，全屏等功能）

基于h5的video,很容易上手，直接上代码，其中还有一些可以优化的地方，大家可以自己优化

在这里插入代码片<!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.0"><title>视频播放器</title><style>.video-box {width: 800px;margin: 0 auto;position: relative;}.menu {visibility: hidden;position: absolute;left: 130px;bottom: 41px;width: 120px;display: flex;justify-content: space-between;font-size: 14px;align-items: center;}#forward {width: 24px;height: 24px;border: none;background: url('./快进.svg') no-repeat;cursor: pointer}#back {width: 24px;height: 24px;border: none;background: url('./快退.svg') no-repeat;cursor: pointer;}.speed {color: white;cursor: pointer;display: flex;flex-direction: column;}ul {list-style: none;position: absolute;bottom: 20px;color: white;background-color: black;font-size: 14px;width: 30px;padding: 0;margin: 0;text-align: center;display: none;opacity: 0.8;border-radius: 10px;}ul li{padding: 2px;}.speed:hover ul {display: block;}.video-box:hover .menu {visibility: visible;}</style>
</head><body><div class="video-box"><video src="./鸿联九五介绍视频.mp4" width="800px" controls  poster="./鸿联九五介绍视频.jpg" ></video><div class="menu"><div class="speed"><ul class="speeds"><li>0.5</li><li>1</li><li>1.5</li><li>2</li></ul><span>倍速</span></div><button id="back"></button><button id="forward"></button></div></div><script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script><script>var select = document.querySelector('select');var add = document.getElementById("forward");var Back = document.getElementById('back');var video = document.querySelector('video');//快进功能实现add.onclick = function () {//获取当前播放的时间var now_time = video.currentTime;//计算快进后的播放时间点var new_time = now_time + 10;//新值赋值回去video.currentTime = new_time;}Back.onclick = function () {//获取当前播放的时间var now_time = video.currentTime;//计算快进后的播放时间点var new_time = now_time - 10;//新值赋值回去video.currentTime = new_time;}$("ul li").click(function () {var item = $(this).index();  //获取索引下标 也从0开始var textword = $(this).text();  //文本内容video.playbackRate = textword})</script>
</body></html>

效果如下

前端html + js视频播放器（快进，快退，倍速，全屏等功能）相关推荐

微信视频播放器隐藏播放控件，视频全屏做法分享
转自:https://www.haorooms.com/post/weixin_hidevideo_control 本人实测有效.为了防止以后还要用到,到时候找不到,所以转载一下. 前言平时项目中视 ...
Flutter自定义视频播放器(播放、暂停、倍速、拖动视频进度）
Flutter自定义视频播放器在pubspec.yaml 添加video_player.dropdown_button2 添加完成后在需要视频的dart文件引入 import 'package:vi ...
安卓平板倍速_推荐：安卓上本地音频播放器，可实现5秒快进快退和倍速播放...
前一篇文章推荐过一个app,但那app没倍速播放功能.我又找到了一个更完美的app 安卓手机上我自己需要这样一款app,主要用来听电子书,知识音频等.需要能实现快进快退几秒钟的以及倍速播放功能.这功能 ...
十、FFmpeg视频播放之快进快退
1.处理快进快退(seek)命令本章我将给大家讲解怎么给我们的播放器添加快进.快退.定位功能,这也是几乎所有播放器都有的功能.为实现此功能,我们要用到av_seek_frame函数,这个函数非常简单 ...
ffmpeg播放器快进快退(七)
指导7:快进快退处理快进快退命令现在我们来为我们的播放器加入一些快进和快退的功能,因为如果你不能全局搜索一部电影是很让人讨厌的.同时,这将告诉你av_seek_frame函数是多么容易使用. 我们 ...
vue项目视频实现键盘快进快退，音量调大小及监听播放事件
直接上代码 <div style="padding-top:56.25%" ><video style="width:100%;height:672px ...
python 循环播放音乐_python gstreamer实现视频快进/快退/循环播放功能
这篇文章主要介绍了python gstreamer 实现视频快进/快退/循环播放功能,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下 Gstreamer到底是个啥? ...
MediaPlayer+SeekBar暂停快进快退
MediaPlayer+SeekBar暂停快进快退首先是,如何能够播放一个视频(网络权限小伙伴们自己盘上) 然后是进度条Seekbar 然后是点击时改变视频播放进度最后是暂停和继续, INTERE ...
python 网站视频快进_python gstreamer实现视频快进/快退/循环播放功能
Gstreamer到底是个啥? GStreamer 是一个基于pipeline的多媒体框架,基于GObject,以C语言写成. 应用GStreamer这个这个多媒体框架,你可以写出任意一种流媒体的应 ...

前端html + js视频播放器（快进，快退，倍速，全屏等功能）

前端html + js视频播放器（快进，快退，倍速，全屏等功能）相关推荐

最新文章

热门文章