h5视频播放

          h5视频播放

一直在写js原生的东西,感觉总是停滞不前,现在我们应该学一些h5新的特性,因为我们毕竟是从事前端的,下面我们一起来写一个视频播放吧

1,html

 1 <div class="video">
 2     <video src="video/oceans.ogv" controls></video><br>
 3     <div class="box">
 4         <div class="bar"></div>
 5     </div>
 6     <span id="te"></span>
 7     <ul id="list"></ul>
 8     <button>播放</button>
 9     <button>快进</button>
10     <button>快退</button>
11     <button>播放速度+</button>
12     <button>播放速度-</button>
13     <button>全屏</button>
14     <button>重新加载</button>
15     <button>关闭声音</button>
16     <button>上一个</button>
17     <button>下一个</button>
18     <input type="range" max="100" min="0" value="30" id="ipt" onchange="control(8,this)">
19     <span>X</span><span id="zero">0</span>
20     </div>

2,css

1     .box{width:624px;height:10px;border:1px solid #fafafa;background:#fafafa;}
2     .bar{width:0;height:10px;background:green;}
3     li{list-style: none;display: inline-block;border:1px solid red;margin-right: 10px;}
4     .video{width:800px;height:600px;}
5      video{width:800px;height:400px;}

3,css

  1 //获取节点
  2     var V=document.querySelector("video");
  3     var btn=document.querySelectorAll("button");
  4     var ipt=document.querySelector("#ipt");
  5     var oSpan=document.querySelector("#zero");
  6     var bar=document.querySelector(".bar");
  7     var box=document.querySelector(".box");
  8     var time=document.querySelector("#te");
  9     var list=document.querySelector("#list");
 10     var a=0;
 11     var data=[{"url":"video/1.mp4","name":"低版本武侠剧"},
 12     {"url":"video/2.mp4","name":"中武侠成本剧"},
 13     {"url":"video/3.mp4","name":"万万木有想到"},
 14     {"url":"video/4.mp4","name":"大王叫我来巡山"}];
 15         //1 点击事件
 16     for(var i=0;i<btn.length;i++){
 17         btn[i].index=i;
 18         btn[i].onclick=function(){
 19             control(this.index);
 20         }
 21     }
 22     function control(state,node){
 23         var init=state;
 24         state=state==2?1:state;
 25         state=state==4?3:state;
 26         switch(state){
 27             case 0:
 28             if(btn[state].innerText=="播放"){
 29                 btn[state].innerText="暂停";
 30                 V.play();
 31             }else{
 32                 btn[state].innerText="播放";
 33                 V.pause();
 34             }
 35             break;
 36             case 1:
 37             if(init==1){
 38                 V.currentTime+=5;
 39             }else{
 40                 V.currentTime+=-5;
 41             }
 42             break;
 43             case 3:
 44             if(init==3){
 45                 V.playbackRate+=0.2;
 46                 V.playbackRate=V.playbackRate>1.9?1:V.playbackRate;
 47                 oSpan.innerText=(oSpan.innerText++)==4?1:oSpan.innerText;
 48             }else{
 49                 V.playbackRate+=-0.2;
 50                 V.playbackRate=V.playbackRate<0.2?1:V.playbackRate;
 51                 oSpan.innerText=(oSpan.innerText--)==-4?1:oSpan.innerText;
 52             }
 53             break;
 54             case 5:
 55             V.webkitRequestFullScreen();
 56             break;
 57             case 6:
 58             V.load();
 59             V.play();
 60             // console.log(V.load());
 61             break;
 62             case 7:
 63             if(V.muted){
 64                 V.muted=false;
 65                 btn[state].innerText="关闭声音";
 66             }else{
 67                 V.muted=true;
 68                 btn[state].innerText="打开声音";
 69             }
 70             break;
 71             case 8:
 72             V.volume=node.value/100;
 73             break;
 74         }
 75     }
 76     //视频切换
 77     for(var i=0;i<data.length;i++){
 78         list.innerHTML+="<li>"+data[i].name+"</li>";
 79     }
 80     var alist=document.querySelectorAll("li");
 81     for(var i=0;i<alist.length;i++){
 82         alist[i].index=i;
 83         alist[i].onclick=function(){
 84         a=this.index;
 85         V.src=data[a].url;
 86         V.play();
 87     }
 88
 89 }
 90            btn[8].onclick=function(){
 91             V.src="";
 92          a--;
 93             if(a<0){
 94                 a=3;
 95             }
 96              V.src=data[a].url;
 97               V.play();
 98         }
 99         btn[9].onclick=function(){
100             V.src="";
101             a++;
102             if(a>3){
103                 a=0;
104             }
105             V.src=data[a].url;
106              V.play();
107         }
108     //3 进度条
109     setInterval(function(){
110         var m=parseInt(V.duration/60);
111         var s=parseInt(V.duration%60);
112         var vm=parseInt(V.currentTime/60);
113         var vs=parseInt(V.currentTime%60);
114         time.innerHTML=vm+":"+vs+"/"+m+":"+s;
115         bar.style.width=V.currentTime/V.duration*100+"%";
116     },1000/24);
117     box.onclick=function(e){
118         var e=e||window.event;
119         var vtime=e.offsetX/this.offsetWidth*V.duration;
120         V.currentTime=vtime;
121     }
时间: 04-24

h5视频播放的相关文章

让我为你介绍一个神器:Chimee,一套可扩展的 H5 视频播放器解决方案

Chimee(读"奇米", [t??'m?:])是由奇舞团开源的一套 H5 视频播放器解决方案,由奇舞团视频云前端团队结合在业务和视频编解码方向的沉淀积累倾心打造. Chimee 支持 MP4.M3U8.FLV 等多种媒体格式,同时它也帮我们解决了大部分的兼容性.差异化问题,包括全屏.自动播放.内联播放.直播解码等常见媒体播放需求. 通过便捷的可热插拔的插件开发,能满足业务方快速迭代.灰度发布等要求:让开发者能够更轻松快捷地完成不同业务场景下 UI.广告等各种功能需求的开发. Chim

Chimee - 简单易用的H5视频播放器解决方案

Chimee是由奇舞团开源的一套H5视频播放器解决方案,由奇舞团视频云前端团队结合在业务和视频编解码方向的沉淀积累倾心打造.Chimee支持MP4.M3U8.FLV等多种媒体格式,同时它也帮我们解决了大部分的兼容性.差异化问题,包括全屏.自动播放.内联播放.直播解码等常见媒体播放需求. 通过便捷的可热插拔的插件开发,能满足业务方快速迭代.灰度发布等要求:让开发者能够更轻松快捷地完成不同业务场景下UI.广告等各种功能需求的开发. 在线演示      免费下载 您可能感兴趣的相关文章 网站开发中很有

video.js--很赞的H5视频播放库

video.js是一款很流行的html5视频播放插件.很适合在移动端播放视频(比如微信网页),功能强大,且支持降级到flash,兼容ie8.官网:http://videojs.com/    git&demo  :http://files.cnblogs.com/files/stoneniqiu/video-js-5.11.4.zip 看下默认例子: <head> <title>Video.js | HTML5 Video Player</title> <

H5视频播放器属性与API控件

一:理论 1.视频播放器的格式介绍 视频主要有三部分组成:视频.音频.编码格式 视频格式:avi.rmb.wmv.mpeg4.ogg.webm 2.H5的标签video的简单使用 <video src="abc.mp4" controls="controls"></video> 或者: <video  width="300" controls="controls"> <source s

H5视频播放器

<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style type="text/css"> body { text-align: center; } #container { display: inline-block; margin: 0 auto; position: rela

iOS对H5 视频播放支持

一.对视频格式的要求: HTML5没有规定浏览器到底应该播放哪一种格式的视频.浏览器厂商可以自行选择支持的格式.市面上几种视频编码格式:vp3.Theora.vp8.H.264....;其中Theora和vp8都是基于vp3再次开发:苹果公司使用的是H.264视频编码格式.H.264优点,编码后生成的视频文件,体积较小,画质也不错:苹果公司和微软公司,它们各自拥有一些H.264专利,所以Safari浏览器只支持H.264编码格式的视频 二.对video标签的修改 1.Safari通过使用全屏幕播

h5中video的一些坑

最近我们的项目做了有关短视频的功能,当然视频的合成还是在客户端来完成,涉及到前端页面的部分就是要有一个H5的落地页,这个页面上要有对视频进行播放.起初我觉得这事儿还是挺简单的,不就是在页面上放一个<video>标签,然后用js控制播放暂停就ok了嘛.但是随着测试和上线的过程中我发现还是有好多问题值得去研究的,因此就有了这篇文章. 不就是一个<video>吗,有什么难的? 这就是我最初的想法,在W3C上找一下有关<video>的文档(http://www.w3school

Android在项目中接入腾讯TBS浏览器WebView的教程与注意的地方

腾讯TBS浏览器服务 我们都知道,在Android开发中,经常会用到Webview,而且WebView是出了名的坑的,各种bug.这时候腾讯老哥站出来了,搞了一个TBS浏览器服务这个东西. 说得这么屌,其实就是一个webView控件,然后解析解析网页的内核是他自己做的,叫X5内核(系统原生的WebView用的是WebKit内核),所以我们开发者用的时候,主要就是用这个com.tencent.smtt.sdk.WebView控件 当然这个控件有很多功能,当然也有些要注意的地方. 官网地址:http

【腾讯Bugly干货分享】从0到1打造直播 App

本文来自于腾讯bugly开发者社区,非经作者同意,请勿转载,原文地址:http://dev.qq.com/topic/5811d42e7fd6ec467453bf58 作者:李智文 概要 分享内容: 互联网内容载体变迁历程,文字--图片/声音--视频--VR/AR----..从直播1.0秀场时代(YY),2.0游戏直播(斗鱼.虎牙.熊猫)到如今全民直播3.0泛生活娱乐时代(映客.花椒),国外直播app(Meerkat .Periscope),随着VA/AR/MR提出的沉浸式视听体验,直播4.0时