具有播放视频，拖拽，自定义右键菜单，上传头像的功能

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>my videoPodcast</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#box{
width: 1000px;
height: 100%;

}
#wrap{
width: 700px;
height: 900px;
margin: 0 auto;

}
ul{
list-style: none;
float: left;
clear: both;
margin-top: 4px;
}
li{
width: 150px;
height: 40px;
line-height: 40px;
font:24px/40px "微软雅黑";
cursor:pointer;
background:lightgray;
margin-top: 1px;
}
input{
display: block;
height: 40px;
width: 40px;
border-radius: 5px;
border: none;
background: darkgray;
color: #FFFFFF;
float: left;
margin-left: 2px;
}
#target{
width: 180px;
height: 100px;
border: 1px solid darkgray;
float: right;
}
#hiddenMenu{
float: right;
display: none;

}

#picContainer{
/*float: left;*/
position: absolute;
left: 330px;
top: 410px;
}
label{
display: block;
width: 180px;
height: 180px;
border-radius: 10px;
border:1px solid darkgray;
font:50px/180px "微软雅黑";
text-align: center;
/*background: url("1.jpg") center no-repeat;*/
}
input[type="file"]{
display:none;
}

</style>
</head>
<body>
<div id="box">
<div id="wrap">

<video autoplay="false" height="400px" controls="controls">
<source src="01.mp4"/>
<source src="01.ogg"/>
</video>

<input type="button" value="暂停" />
<input type="button" value="静音" />
<input type="button" value="全屏" />

<ul id="from">
<li draggable="true">01.mp4</li>
<li draggable="true">02.mp4</li>
</ul>
<!--drag session begin-->
<div id="target">
<ul id="to">

</ul>
</div>
<!--drag session end-->

<!--hidden menu begins-->
<div id="hiddenMenu">
<ul>
<li>收藏视频</li>
<li>赞赏视频</li>

</ul>
</div>
<!--hiddeb menu ends-->

<!--pic upload begins-->
<form id="picContainer">
<label for="photo">+</label>
<input type="file" id="photo"/>
<input type="button" value="提交" / id="submit">
</form>
<!--pic upload ends-->
</div>
</div>

<script type="text/javascript">
var video = document.getElementsByTagName("video")[0];
var liS = document.getElementsByTagName("li");
for(var i=0;i<liS.length;i++){

liS[i].onclick=function(){
video.src=this.innerHTML;
for(var j=0;j<liS.length;j++){
liS[j].style.background="lightgray";
}
this.style.background="darkgray";
}

}
video.oncanplay=function(){
console.log(video.duration);

}
video.ontimeupdate=function(){
console.log(video.currentTime);

}
var inp = document.getElementsByTagName("input")[0];
var mut = document.getElementsByTagName("input")[1];
var fullScreen=document.getElementsByTagName("input")[2];

inp.onclick=function(){
if(inp.value=="暂停"){
video.pause();
inp.value="播放"

inp.style.background="lightgray";

}else{
video.play();
inp.value="暂停"
// video.webkitRequestFullScreen();
inp.style.background="darkgray";
}

}
mut.onclick=function(){
if(mut.value=="静音"){
video.muted=true;
mut.value="音量"
mut.style.background="lightgray";

}else{
video.muted=false;
mut.value="静音"
mut.style.background="darkgray";

}
}
fullScreen.onclick=function(){
video.webkitRequestFullScreen();
}
//拖动功能
var target=document.getElementById("target");
var ul=document.getElementById("from");
var liS=ul.children;
var node=null;

for(var i=0;i<liS.length;i++){
liS[i].ondrag=function(){
node=this;
}
}

target.ondragover=function(e){
var event = e||window.event;
//阻止浏览器默认事件，drop才会发生
e.preventDefault();
}
target.ondrop=function(){
target.children[0].appendChild(node);
}

//自定义右键菜单
var hidderMenu=document.getElementById("hiddenMenu");

target.oncontextmenu=function(){
hidderMenu.style.display="block";

return false;
}
var box=document.getElementById("box");
box.onclick=function(){
hidderMenu.style.display="none";
}

//上传图片并显示
var fr = new FileReader();
var label = document.getElementsByTagName("label")[0]
var sub = document.getElementById("submit");
var fileInp = document.getElementById("photo");
sub.onclick=function(){
var file = fileInp.files[0];
fr.readAsDataURL(file);
fr.onloadend=function(){
label.style.background = "url("+fr.result+") center no-repeat"
}
}

</script>
</body>
</html>

页面如下：

拖动条实现：

<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="utf-8">

        <style type="text/css">

            *{

                margin: 0;

                padding: 0;

                box-sizing: border-box;

            }

            div.box{

                width: 500px;

                margin:60px auto;

            }

            video{

                width: 500px;

                margin-bottom:5px;

                display: block;

            }

            div.control{

                width: 500px;

                height: 10px;

                background:#ccc;

                position: relative;

            }

            div.progress{

                width: 0;

                height: 10px;

                background: orange;

                border-radius: 5px;

            }

            div.pointer{

                width: 20px;

                height: 16px;

                border-radius: 5px;

                position: absolute;

                top:-3px;

                background:darkgray;

            }

        </style>

    </head>

    <body>

    <div class="box">

        <video src="01.mp4">

        </video>

        <div class="control">

            <div class="progress"></div>

            <div class="pointer" draggable=true></div>

        </div>

    </div>

    <script type="text/javascript">

            //获取相关元素

            var video = document.querySelector("video");

            var control = document.querySelector(".control");

            var progress = document.querySelector(".progress");

            var pointer = document.querySelector(".pointer");

            //获取相关距离

            var totalWidth= control.offsetWidth-pointer.offsetWidth;

            var currentTime = 0;

            var duration = 0;

            var x=0;

            var percent=0;

            //视频是否能够播放

            video.oncanplay=function(){

                duration = video.duration;

                //绑定事件

                control.ondragover=function(e){

                    var e= e||window.event;

                    e.preventDefault();

                    x = e.clientX - control.offsetLeft;

                    percent = x/totalWidth;

                    if(percent>1){

                        return;

                    }

                    pointer.style.left = x+"px";

                    progress.style.width = x+"px";

                    video.currentTime = duration*percent;

                }

                control.ondrop=function(){

                    video.play();

                }

                control.onclick=function(e){

                    var e = e||window.event;

                    x = e.clientX - control.offsetLeft;

                    if(x>totalWidth){

                        x = totalWidth;

                    }

                    pointer.style.left = x+"px";

                    progress.style.width = x+"px";

                    percent = x/totalWidth;

                    video.currentTime = duration*percent;

                    video.play();

                }

            }

            //视频播放时，更新进度

            video.ontimeupdate=function(){

                currentTime = video.currentTime;

                percent = currentTime/duration;

                if(percent>1){

                    return;

                }

                x = percent*totalWidth;

                pointer.style.left = x+"px";

                progress.style.width = x+"px";

            }

            //点击进度control更新进度

    </script>

    </body>

</html>

一个html5视频播放器的更多相关文章

  1. 打造自己的html5视频播放器

    前段时间重新学习了一下html5的video部分,以前只是停留在标签的使用上,这一次决定深入了解相关的API,并运用这些API打造一个简单的视频播放器.所谓“打造自己的”,就是要自己重写video标签 ...

  2. jqm视频播放器,html5视频播放器,html5音乐播放器,html5媒体播放器,video开展demo,html5视频播放演示示例,html5移动视频播放器

    最近看到很多有用的论坛html5视频播放的发展,音乐播放功能,大多数都在寻找答案.所以,我在这里做一个demo.对于大家互相学习.html5开发越来越流行,至于这也是一个不可缺少的一部分的视频. 如何 ...

  3. html5视频播放器 二 （功能实现及播放优化）

    样式改写css,其中的一些按钮是在“阿里妈妈”上找的字体图标,就不向上传了. /* *CoolPlay视频播放器 * 2016年8月1日 * 627314658@qq.com * */ @font-f ...

  4. html5视频播放器 一 （改写默认样式）

    一个项目用到了html5视频播放器,于是就写了一个,走了很多坑,例如在chrome中加载视频出现加载异常等 先看看效果 是不是感觉换不错,以下是我播放器改写样式的布局. <!DOCTYPE ht ...

  5. 手把手从零开始---封装一个vue视频播放器组件

    现在,在网页上播放视频已经越来越流行,但是网上的资料鱼龙混杂,很难找到自己想要的,今天小编就自己的亲身开发体验,手把手从零开始---封装一个vue视频播放器组件. 作为一个老道的前端搬砖师,怎么可能会 ...

  6. Html5视频播放器-VideoJS+Audio标签实现视频，音频及字幕同步播放

    一,VideoJS介绍 引用脚本,videojs很为你着想,直接cdn了,你都不需要下载这些代码放入自己的网站 <link href=”http://vjs.zencdn.net/c/video ...

  7. video.js html5 视频播放器

    我个人感觉很不错 https://github.com/videojs/video.js <head> <title>Video.js | HTML5 Video Player ...

  8. video.js分段自动加载视频【html5视频播放器】

    突发奇想的需求,要在官网上放一个一个半小时的视频教程…… 然而,加载成了问题,页面是cshtml的.net混合网站,不知道哪儿的限制,导致视频加不出来. 没有办法,只能前端想办法了. 于是将视频切割成 ...

  9. 很震撼的HTML5视频播放器，电影院的感觉

    效果很震撼!有电影院的感觉了.呵呵. 看了下代码,依然是 在一个canvas里嵌入<video>然后getImageData 点击这里查看效果 代码: var canvas = docum ...

随机推荐

  1. 箭头函数 -------JavaScript

    本文摘要:http://www.liaoxuefeng.com/ ES6标准新增了一种新的函数:Arrow Function(箭头函数). 为什么叫Arrow Function?因为它的定义用的就是一 ...

  2. SummerVocation_Learning--java的基本概念

    基本数据类型:四类八种. 四类:整数型(默认int),浮点型(默认double),逻辑型(布尔型),文本型(字符型). 八种:int, byte, short, long; double, float ...

  3. MySQL - 在sql语句执行时是先执行触发器再检查约束条件的

    在sql语句执行时是先执行触发器再检查约束条件的

  4. rpc - 接口返回数据结构的设计

    方案一: 系统级状态  .业务级别的状态同用 code要特殊声明保留状态,如若不声明保留状态,一旦业务开发人员用到了系统级的状态,就有必要侵入的改动业务返回的code(新code与业务欲返回的code ...

  5. 树莓派下ubuntu-mate中ssh服务的安装与开机后自启动

    ssh程序分为客户端程序openssh-client和服务端程序openssh-server. 如果需要ssh登陆到别的电脑,需要安装openssh-client,该程序ubuntu是默认安装的.而如 ...

  6. (原创)task和function语法的使用讨论(Verilog，CPLD/FPGA)

    1. Abstract function和task语句的功能有很多的相似之处,在需要有多个相同的电路生成时,可以考虑使用它们来实现.因为个人使用它们比较少,所以对它们没有进行更深的了解,现在时间比较充 ...

  7. 动态规划：最长上升子序列之基础（经典算法 n^2）

    解题心得: 1.注意动态转移方程式,d[j]+1>d[i]>?d[i]=d[j]+1:d[i] 2.动态规划的基本思想:将大的问题化为小的,再逐步扩大得到答案,但是小问题的基本性质要和大的 ...

  8. TI C64X+通用库函数使用手册

    在使用前,当知悉以下几点: 函数进程由手动汇编而成,已充分发挥器件效率.同时TI对外提供C和线性汇编代码 对于个人一些特殊应用,DSPLIB可能会带来额外的cycle消耗 TI DSPLIB依平台和时 ...

  9. Asp.net自定义控件开发任我行（3）-Render

    摘要 上一篇我们讲到了自定义标签TagPrefix用法,此篇我们来讲一下控件的呈现,主要是呈现下拉框 内容 呈现的方法有,Render,RenderControl,RenderChildren,这三个 ...

  10. DEDE调用指定文章ID来调用特定文档

    http://www.jb51.net/cms/137423.html 代码如下: {dede:arclist row=1 idlist='6'} <li><a href=" ...