html5 video标签自定义控制条

最新推荐文章于 2024-08-09 07:18:52 发布

伤心鱼

最新推荐文章于 2024-08-09 07:18:52 发布

阅读量3.5w

点赞数 3

分类专栏： WEB前端文章标签： html5 视频 video 控制条

本文链接：https://blog.csdn.net/ishangxinyu/article/details/51882518

版权

本文讲述了在项目中使用HTML5的video标签自定义控制条的需求，遇到的问题在于手机端，由于浏览器解析导致原生控制条无法隐藏，并提出了使用canvas作为替代方案，但实际操作中因CSS实现不理想而未能达到预期效果。作者计划未来继续研究解决这个问题。

摘要由CSDN通过智能技术生成

最近做项目时要用到播放视频，采用的是h5的video标签，但是控制条不好看，所以想着自己做一套控制条！

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="pragma" content="no-cache">
<meta name="wap-font-scale" content="no">
<meta name="format-detection" content="telephone=no"/>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="blank">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<script type="text/javascript" src="http://m.the3ctv.com/wap/jquery/jquery-1.8.3.min.js"></script>
<link type="text/css" rel="stylesheet" href="http://m.the3ctv.com/wap/css/common.css">
<title>播放</title>
<style type="text/css">/*控制条的样式*/
.video_play_main_div{
    background-color:#000000;width:100%;height:100%;}
.video_play_main_div .header{
    height:45px;}
.video_play_main_div .header a:nth-child(1){
    display: block;float: left;}
.video_play_main_div .header a:nth-child(1) img{
    height: 20px;margin-top: 12.5px;margin-left: 12.5px;}
.video_play_main_div .header a:nth-child(2){
    display: block;float: right;}
.video_play_main_div .header a:nth-child(2) img{
    height: 35px;margin-top: 5px;margin-right: 7px;}
.video_play_main_div .play_video{
    width:100%;position:absolute;top:50