H5 实现自定义video播放器,快来点我吧

效果

要实现自定义video播放器需要熟悉video的相关操作

视频播放它有哪些操作
1. 播放 play()
2. 暂停 pause()
3. 判断当前是暂停还是播放状态 paused
4. 更新进度监听事件 ontimeupdate = function() {}
5. 设置进度视频的总时长： duration 当前时间： currenttime
6. 全屏操作 requestFullScreen

<!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;}.contro1 {width: 100%;height: 50px;background: #fff;display: flex;border-top: 1px solid #fff;}.contro1 .right,.contro1 .left {flex-basis: 50px;background-color: #000;color: #fff;text-align: center;line-height: 50px;font-size: 20px;}.contro1 .progress {flex: 1;}.contro1 .current {width: 0%;height: 50px;background-color: gray;}</style>
</head><body><div class="box"><video src="./movie/bglb.mp4"></video><div class="contro1"><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>var video = document.querySelector("video");// 点击播放暂停按钮的操作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");}}// 更新进度条// 拿到视频的总时长,求百分比,播放时调用video.ontimeupdate = function () {var percent = video.currentTime / video.duration * 100 + "%";document.querySelector(".current").style.width = percent;}// 点击进度条,更新处理document.querySelector(".progress").onclick = function (target) {// 拿到进度条的宽度var width = this.offsetWidth;// 拿到当前点击位置的x坐标var x = target.offsetX;video.currentTime = x / width * video.duration;}//4. 全屏的功能的实现document.querySelector(".right").onclick = function () {//进入全屏video.webkitRequestFullScreen();}</script>

H5 实现自定义video播放器,快来点我吧相关推荐

JS 用CANVAS自定义VIDEO播放器
JS 用CANVAS自定义VIDEO播放器概述 CANVAS绘制核心代码播放器代码使用页面HTML代码使用页面JS代码使用示例概述 HTML5用规范的VIDEO标签取代了以往需要借助外部控 ...
html5+video手机样式修改,如何自定义video播放器样式？
本篇文章给大家分享了关于如何自定义video播放器样式,内容很详细,希望可以帮助到大家. DIY 本文基于HTML5 Video API,自定义Web视频播放器样式. 其实吧,原生的video 标签样 ...
html自定义video播放器
本章的css可以说约等于没有,全是逻辑,仅供参考 html <!DOCTYPE html> <html lang="en"> <head>< ...
自定义video播放器的常用的事件。
window.onresize 这个事件主要用于当浏览器窗口发生改变时,实时获取video的width和height: 代码示例: window.onresize=function() {// 控制窗 ...
微信中H5同层Video播放器接入教程
微信中H5同层Video播放器接入教程 x5-video-player-type 启用H5同层播放器通过video属性"x5-video-player-type"声明启用同层H5 ...
Vue 自定义音乐播放器组件为H5添加背景音乐
自定义音乐播放器组件为H5添加背景音乐: 1.创建music.vue组件 <template><div><div @click="changeOn" ...
JS控制Video播放器（video详细介绍）(快进、后退、播放、暂停、音量大小)
JS控制Video播放器(video详细介绍)(快进.后退.播放.暂停.音量大小) 来源:https://blog.csdn.net/hh3167253066/article/details/1203 ...
h5 video播放器遇到的坑
h5 video播放器遇到的坑 1.在安卓webview中默认全屏播放解决方法此属性需要在播放前设置好,播放之后设置可能会无效如果使用video播放音频文件的话,安卓会出现黑屏并且无法播放的状况, ...
玩转前端 Video 播放器
Web 开发者们一直以来想在 Web 中使用音频和视频,但早些时候,传统的 Web 技术不能够在 Web 中嵌入音频和视频,所以一些像 Flash.Silverlight 的专利技术在处理这些内容上变 ...

H5 实现自定义video播放器,快来点我吧

效果

要实现自定义video播放器需要熟悉video的相关操作

H5 实现自定义video播放器,快来点我吧相关推荐

最新文章

热门文章