一个html5视频播放器
具有播放视频，拖拽，自定义右键菜单，上传头像的功能
<!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视频播放器的更多相关文章
- 打造自己的html5视频播放器
前段时间重新学习了一下html5的video部分,以前只是停留在标签的使用上,这一次决定深入了解相关的API,并运用这些API打造一个简单的视频播放器.所谓“打造自己的”,就是要自己重写video标签 ...
- jqm视频播放器,html5视频播放器,html5音乐播放器,html5媒体播放器,video开展demo,html5视频播放演示示例,html5移动视频播放器
最近看到很多有用的论坛html5视频播放的发展,音乐播放功能,大多数都在寻找答案.所以,我在这里做一个demo.对于大家互相学习.html5开发越来越流行,至于这也是一个不可缺少的一部分的视频. 如何 ...
- html5视频播放器 二 （功能实现及播放优化）
样式改写css,其中的一些按钮是在“阿里妈妈”上找的字体图标,就不向上传了. /* *CoolPlay视频播放器 * 2016年8月1日 * 627314658@qq.com * */ @font-f ...
- html5视频播放器 一 （改写默认样式）
一个项目用到了html5视频播放器,于是就写了一个,走了很多坑,例如在chrome中加载视频出现加载异常等 先看看效果 是不是感觉换不错,以下是我播放器改写样式的布局. <!DOCTYPE ht ...
- 手把手从零开始---封装一个vue视频播放器组件
现在,在网页上播放视频已经越来越流行,但是网上的资料鱼龙混杂,很难找到自己想要的,今天小编就自己的亲身开发体验,手把手从零开始---封装一个vue视频播放器组件. 作为一个老道的前端搬砖师,怎么可能会 ...
- Html5视频播放器-VideoJS+Audio标签实现视频，音频及字幕同步播放
一,VideoJS介绍 引用脚本,videojs很为你着想,直接cdn了,你都不需要下载这些代码放入自己的网站 <link href=”http://vjs.zencdn.net/c/video ...
- video.js html5 视频播放器
我个人感觉很不错 https://github.com/videojs/video.js <head> <title>Video.js | HTML5 Video Player ...
- video.js分段自动加载视频【html5视频播放器】
突发奇想的需求,要在官网上放一个一个半小时的视频教程…… 然而,加载成了问题,页面是cshtml的.net混合网站,不知道哪儿的限制,导致视频加不出来. 没有办法,只能前端想办法了. 于是将视频切割成 ...
- 很震撼的HTML5视频播放器，电影院的感觉
效果很震撼!有电影院的感觉了.呵呵. 看了下代码,依然是 在一个canvas里嵌入<video>然后getImageData 点击这里查看效果 代码: var canvas = docum ...
随机推荐
- C# FileStream对象
FileStream对象表示在磁盘或网络路径上指向文件的流.当类提供向文件读写字节的方法时,经常使用StreamReader或StreamWriter执行这些功能.这是因为FileStream类操作字 ...
- Java如何将十六进制数转换为十进制数的自编程序
package com.swift;//所属包 import java.util.Scanner;//导入扫描器 public class Hex2Decimal { public static vo ...
- ElasticSearch High Level REST API【1】文档基本操作
获取ES客户端 ES的提供了四种Java客户端,分别为节点客户端(node client).传输客户端(Transport Client).低级REST客户端.高级REST客户端. 节点客户端作为集群 ...
- Java - 静态方法不具有多态性
class A1 { public static void f() { System.out.println("A1.f()"); }}class A2 extends A1 { ...
- Zabbix监控告警Lack of free swap space on Zabbix server解决办法
报错详情如下: 是因为Zabbix监控没有考虑虚拟主机的交换空间情况 解决办法修改配置 修改表达式内容:{Template OS Linux:system.swap.size[,pfree].last ...
- Vue2+webpack+node 配置+入门+详解
Vue2介绍 1.vue2.0 Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架. Vue 的核心库只关注视图层 采用单文件组件 复杂大型单页应用程序(SPA) 响 ...
- web前后台数据交互的几种方式
1.利用cookie对象 Cookie是服务器保存在客户端中的一小段数据信息.使用Cookie有一个前提,就是客户端浏览器允许使用Cookie并对此做出相应的设置.一般不赞成使用Cookie. (1) ...
- python3:判断手机的亮屏状态
在用python对手机做一些自动化操作时,常常会判断手机的亮屏状态,知晓手机的亮屏状态后才好做进一步的动作,如给屏幕解锁等. 用于了解手机的亮屏情况,有一个adb命令可用: adb shell du ...
- 20181229（守护进程，互斥锁，IPC，生产者和消费者模型）
一.守护进程 守护进程:一个进程B守护另一个进程A,当被守护的进程A结束,进程B也就结束了.(不一定同生,但会同死) 两个特点: ①守护进程会在主进程代码执行结束后就终止 ②守护进程内无法再开启子进程 ...
- 饭卡 HDU - 2546（dp）
电子科大本部食堂的饭卡有一种很诡异的设计,即在购买之前判断余额.如果购买一个商品之前,卡上的剩余金额大于或等于5元,就一定可以购买成功(即使购买后卡上余额为负),否则无法购买(即使金额足够).所以大家 ...