需求：

1.播放器可以支持上传默认封面图片
2.播放器的进度条长度拉长些,与播放器长度一样长，或者其他方式美化一下

首先需求1.播放器可以支持上传默认封面图片解决方案：

1.第一种方法可以直接在video标签中直接添加poster属性
<!DOCTYPE HTML>
<html>
<body><video src="/i/movie.ogg" controls="controls" poster="../../imgs/poster.png">
your browser does not support the video tag
</video></body>
</html>
2.前端利用js给video标签追加poster属性以及属性对应的图片路径：
<!DOCTYPE HTML>
<html>
<body><video src="/i/movie.ogg" controls="controls" id="myVideo">
your browser does not support the video tag
</video></body>
</html>
<script type="text/javascript">const thisVideo = document.getElementById('myVideo');const thisVideoImgSrc = "img/poster.png"thisVideo.setAttribute('poster',thisVideoImgSrc)
</script>
下图为正常video标签的显示图片（客户说不好看要求对video播放器样式进行美化）

就以2.播放器的进度条长度拉长些,与播放器长度一样长为例进行样式的修改

操作步骤：

1.首先需要利用浏览器内部设置进行对video标签的内部构造进行查看，正常状态下浏览器F12抓取到video播放器如下图，我们无法看到video内部构造，所以无法对video播放器样式进行修改

2.谷歌浏览器下，找到F12开发者工具->设置按钮->Preferences->Show user agent 勾选shadow DOM


3.然后右键选中video播放器->检察,将会看到一下内容，可以看到video的内部结构，这样就可以根据类名进行样式的修改

4.修改video播放器的进度条长度问题代码：
video::-webkit-media-controls-timeline {padding-left: 0px!important;padding-right: 0px!important;
}
修改完之后样式如下（本子自己感觉还是有一点距离好看，很无奈！）

修改video标签默认样式问题video播放器样式优化；video播放器默认显示图片相关推荐

  1. video标签的mp4格式的视频不能在iphone上播放问题

    1.其实这是因为mp4的这种编码方式,iphone不支持,只需要用视频软件(我用格式化工厂)转一下编码方式就行,如图:

  2. html5 video css样式修改,htmlvideo标签用法

    HTML5中 使用video标签 播放本地视频 JS: 在test.html页面,使用button标签创建四个按钮,分别是播放/暂停.大.中.小,用于控制视频的播放效果.同时,使用video标签创建一 ...

  3. video标签学习 xgplayer视频播放器分段播放mp4

    文章目录 学习链接 目标 video标签自带视频和制作的视频区别 video标签的src属性 本地视频文件 前端代码 播放效果 服务器视频文件 示例1 后端代码 前端代码 播放效果 示例2 后端代码 ...

  4. chrome浏览器不支持video标签，不能自动播放。

    问题:chrome浏览器不支持video标签的autoplay属性,网页刷新后不能自动播放视频. 处理: 方法一: 在video标签中加入muted="muted" 属性,但会让视 ...

  5. html5视频播放器隐藏控制,HTML5 video标签（播放器）学习笔记（二）:播放控制

    上一篇介绍了html5标签video(播放器)初始化需要做的一些工作,如何简单快速使用html5的播放器,本文将重点介绍如何用JS来操作video标签,也就是如何对video做一些简单基本的操作,包括 ...

  6. web三件套（经验贴）Google里，video标签播放mkv视频文件

    video标签播放mkv视频文件 第一次: <embed src="咏春.mkv" hidden="no" loop="true" R ...

  7. 【实战问题】【3】iPhone无法播放video标签中的视频

    问题:视频都是MP4格式,视频可以在手机上正常播放.video标签中的视频在安卓点击可以播放,但在iPhone无法播放 解决方案: 1,视频编码格式问题,具体iPhone手机支持的是哪些格式可见官方的 ...

  8. HTML5 video标签的播放控制

    转自http://www.php.cn/html5-tutorial-402832.html 这篇文章主要介绍了HTML5 video标签的播放控制,本文讲解了获取影片总时长.播放.暂停.获取影片的播 ...

  9. html5 video 定位播放,HTML5 video标签的播放控制

    这篇文章主要介绍了HTML5 video标签的播放控制,本文讲解了获取影片总时长.播放.暂停.获取影片的播放时间和设置播放点.音量的获取和设置等内容,需要的朋友可以参考下 上一篇介绍了html5标签v ...

  10. 前端| js动态修改video标签视频不刷新的问题

    问题描述:在网页上用<video>标签放一个视频播放器,点击视频目录来自动播放不同的视频.通过js动态生成li,点击li之后更改<video>标签<source>中 ...

最新文章

  1. sqlite3 解决并发读写冲突的问题
  2. 3.10 程序示例--神经网络设计-机器学习笔记-斯坦福吴恩达教授
  3. 目前有量子计算机,中国“祖冲之”刚刚成为当前最强大的量子计算机
  4. 如何用四个月搞定java？
  5. matlab var求方差
  6. 当当elastic-job docker快速部署_[小Z课堂]－docker 快速部署 elasticsearch 和 kibana，一键部署...
  7. 服务器多路径 映射分区找不到,设备映射多路径DM-Multipath
  8. 基于JAVA+SpringMVC+Mybatis+MYSQL的二手书交易系统
  9. JavaScript高级程序设计笔记 事件冒泡和事件捕获
  10. win10支持8t 硬盘_WIN8.1/ WIN10磁盘分区详解
  11. 微信小程序踩坑——项目内文件夹删除不掉
  12. 《Java编程思想》读书笔记分享
  13. 【译】Executor, ExecutorService 和 Executors 间的不同
  14. python 跳跃游戏
  15. 手机与单片机NFC通讯方案，手机NFC通讯方案，单片机NFC通信方案
  16. 常垒·会客厅：医保局时代下的医院智能数据大变革
  17. 阿里云视觉智能开放平台产品上新——能力前瞻
  18. 原生ajax和Jquery的ajax
  19. 美洲新世界多开器 NewWorld多开器
  20. ug使用admas求解器方法

热门文章

  1. 用问答式聊一下最近资本火热推动的chatGPT
  2. Python实现秒杀抢购某宝商品，不再害怕双十一抢不到了
  3. mysql 学习课堂笔记 第二天（值得学习、收藏！）
  4. 切水果 java_Android上的水果忍者刀锋效果（JAVA实现）
  5. visual studio 2019 安装卸载问题
  6. Frida spawn 启动app
  7. 华为路由器密码恢复方法(含各版本BootROM操作方法)
  8. Vue3+Vite+ElementPlus自定义主题色
  9. 几款好看的idea壁纸,不挡代码
  10. Wolfram|Alpha 量子化学分步解答系列