超简单的html5视频播放器

效果：

代码很简单

  1 define("html5_video_player", [ ‘../avalon-min‘], function(avalon) {
  2     function formatTime(seconds) {
  3         var seconds = Math.round(seconds);
  4         var minutes = Math.floor(seconds / 60);
  5         seconds = Math.floor(seconds % 60);
  6         minutes = (minutes >= 10) ? minutes : "0" + minutes;
  7         seconds = (seconds >= 10) ? seconds : "0" + seconds;
  8         return minutes + ":" + seconds;
  9     }
 10     var playing=false,mute=false,vol=50,fs=false,active=false,inactivityTimeout=timer=null;
 11     avalon.bind($(‘control_btn‘),‘click‘,function(){
 12         if(!playing){
 13             $(‘html5_video‘).play();
 14             $(‘control_btn‘).className=‘html5_video_pause_btn inline-block‘;
 15             playing=true;
 16         }else{
 17             $(‘html5_video‘).pause();
 18             $(‘control_btn‘).className=‘html5_video_play_btn inline-block‘;
 19             playing=false;
 20         }
 21     });
 22     avalon.bind($(‘video_bar‘),‘click‘,function(e){
 23         var a=(e.clientX-$(‘video_bar‘).offsetLeft)/$(‘video_bar‘).offsetWidth;
 24         $(‘html5_video‘).currentTime =a.toFixed(2)*$(‘html5_video‘).duration;
 25     });
 26     avalon.bind($(‘vol_bar‘),‘click‘,function(e){
 27         var a=(e.clientX-$(‘vol_bar‘).offsetLeft-8)/$(‘vol_bar‘).offsetWidth;
 28         vol=$(‘html5_video‘).volume =a;
 29         $(‘vol_value‘).style.width=a*100+‘%‘;
 30     });
 31     avalon.bind($(‘mute_icon‘),‘click‘,function(){
 32         if(!mute){
 33             $(‘html5_video‘).volume=0;
 34             $(‘mute_icon‘).className=‘html5_video_mute1‘;
 35             mute=true;
 36         }else{
 37             $(‘html5_video‘).volume=vol;
 38             $(‘mute_icon‘).className=‘html5_video_mute‘;
 39             mute=false;
 40         }
 41     });
 42     avalon.bind($(‘html5_video‘),‘loadedmetadata‘,function(){
 43         $(‘html5_video_duration‘).innerHTML=formatTime($(‘html5_video‘).duration);
 44         $(‘html5_video‘).volume=0;
 45     });
 46     avalon.bind($(‘html5_video‘),‘timeupdate‘,function(){
 47         $(‘html5_play_time‘).innerHTML=formatTime($(‘html5_video‘).currentTime);
 48         $(‘video_progress_bar‘).style.left=$(‘html5_video‘).currentTime/$(‘html5_video‘).duration*100+‘%‘;
 49     });
 50     avalon.bind($(‘html5_video_fullscreen‘),‘click‘,function(e){
 51         if(!fs){
 52             toggle_fullscreen();
 53         }else{
 54             exit_fullscreen();
 55         }
 56     });
 57     document.onmozfullscreenchange = function() {
 58         if ($(‘html5_video‘).clientWidth +2!= document.documentElement.clientWidth) {
 59             exit_fullscreen();
 60         }
 61     };
 62     document.onwebkitfullscreenchange = function() {
 63         if ($(‘html5_video‘).clientWidth!= document.documentElement.clientWidth) {
 64             exit_fullscreen();
 65         }
 66     };
 67     function exit_fullscreen() {
 68         $(‘html5_video‘).className=‘‘;
 69         fs = false;
 70         active=false;
 71         $(‘video_control‘).className=‘‘;
 72         if (document.exitFullscreen) {
 73             document.exitFullscreen();
 74         } else if (document.webkitCancelFullScreen) {
 75             document.webkitCancelFullScreen();
 76         } else if (document.mozCancelFullScreen) {
 77             document.mozCancelFullScreen();
 78         }
 79     }
 80     function toggle_fullscreen() {
 81         $(‘html5_video‘).className=‘video_fs‘;
 82         fs = true;
 83         $(‘video_control‘).className=‘fullscreen‘;
 84         var elem=$(‘html5_video‘);
 85         if (elem.msRequestFullscreen) {
 86             elem.msRequestFullscreen();
 87         } else if (elem.mozRequestFullScreen) {
 88             elem.mozRequestFullScreen();
 89         } else if (elem.webkitRequestFullscreen) {
 90             elem.webkitRequestFullscreen();
 91         }
 92     }
 93     function updateBuffered() {
 94           var v = $(‘html5_video‘);
 95           var r = v.buffered;
 96           if (r) {
 97             for (var i=0; i<r.length; i++) {
 98               var start = r.start(i);
 99               var end = r.end(i);
100             }
101             $(‘video_buffer_bar‘).style.width=end/$(‘html5_video‘).duration*100+‘%‘;
102           }
103         }
104     setInterval(updateBuffered,500);
105     function b(){
106         if(active){
107             $(‘video_control‘).style.display=‘none‘;
108             active=false;
109             console.log(active);
110         }
111     }
112     avalon.bind($(‘html5_video‘),‘mousemove‘,function(e){
113         if(fs){
114             clearTimeout(inactivityTimeout);
115             active=true;
116             $(‘video_control‘).style.display=‘block‘;
117             inactivityTimeout = setTimeout(b, 5000);
118         }
119     });
120 });

html

 1 <link type="text/css"
 2     href="http://localhost/twitter/css/html5_video_player.css"
 3     rel="stylesheet" />
 4 <div id=‘wrap_html5_video‘>
 5     <div id=‘html5_video_area‘>
 6         <video id="html5_video" width="360" height="240">
 7             <source type=" video/mp4" src="http://localhost/twitter/videos/2.mp4"></source>
 8             <source type=" video/webm"
 9                 src="http://localhost/twitter/videos/2.webm"></source>
10         </video>
11     </div>
12     <div id=‘video_control‘>
13         <div id=‘video_bar‘>
14             <div id=‘video_buffer_bar‘></div>
15             <div id=‘video_progress_bar‘></div>
16         </div>
17         <div id=‘play_control‘>
18             <ul>
19                 <li class=‘inline-block‘><a
20                     class=‘html5_video_play_btn inline-block‘ id=‘control_btn‘></a></li>
21                 <li class=‘inline-block‘><a id=‘mute_icon‘
22                     class=‘html5_video_mute‘></a>
23                     <div id=‘vol_bar‘ class=‘inline-block‘>
24                         <p id=‘vol_value‘></p>
25                     </div></li>
26                 <li class=‘inline-block‘ id=‘html5_video_time‘><span
27                     id=‘html5_play_time‘>00:00</span><span>/</span><span
28                     id=‘html5_video_duration‘>33:44</span></li>
29                 <li class=‘inline-block‘><a id=‘html5_video_fullscreen‘
30                     class=‘inline-block‘></a></li>
31             </ul>
32         </div>
33         <div id=‘a‘></div>
34     </div>
35     <div id=‘buffered_log‘></div>
36 </div>
37 <script type="text/javascript">
38     require(‘html5/html5_video_player‘);
39 </script>

css

  1 @CHARSET "UTF-8";
  2
  3 #wrap_html5_video {
  4     padding: 10px;
  5     width: 360px;
  6 }
  7
  8 #vol_bar,#video_bar,#vol_value {
  9     height: 9px;
 10     background-color: #999999;
 11 }
 12
 13 #vol_bar {
 14     width: 100px;
 15     cursor: pointer;
 16 }
 17
 18 #vol_value {
 19     background-color: #179df7;
 20     width: 50%;
 21 }
 22
 23 #html5_video {
 24     display: block;
 25     border: 1px solid #c0deed;
 26 }
 27
 28 #video_buffer_bar {
 29     background-color: #179DF7;
 30     width: 0;
 31 }
 32
 33 #video_progress_bar,#video_buffer_bar {
 34     position: absolute;
 35     height: 100%;
 36 }
 37
 38 #video_progress_bar {
 39     background-color: #0066FF;
 40     width: 2px;
 41     left: 0;
 42 }
 43
 44 .html5_video_pause_btn,.html5_video_play_btn {
 45     width: 40px;
 46     height: 40px;
 47     cursor: pointer;
 48 }
 49
 50 .html5_video_play_btn {
 51     background: url("http://localhost/twitter/images/html5_video.jpg") 0 0
 52         no-repeat;
 53 }
 54
 55 .html5_video_play_btn:hover {
 56     background: url("http://localhost/twitter/images/html5_video.jpg") -41px
 57         0 no-repeat;
 58 }
 59
 60 .html5_video_pause_btn {
 61     background: url("http://localhost/twitter/images/html5_video.jpg") 0
 62         -42px no-repeat;
 63 }
 64
 65 .html5_video_pause_btn:hover {
 66     background: url("http://localhost/twitter/images/html5_video.jpg") -41px
 67         -42px no-repeat;
 68 }
 69
 70 #play_control a,#vol_bar {
 71     vertical-align: middle;
 72 }
 73
 74 #html5_video_fullscreen {
 75     width: 25px;
 76     background: url("http://localhost/twitter/images/html5_video.jpg") 0
 77         -310px no-repeat;
 78     height: 18px;
 79 }
 80
 81 #play_control #html5_video_time {
 82     font-size: 14px;
 83 }
 84
 85 #play_control li,#play_control ul {
 86     font-size: 0;
 87 }
 88
 89 #play_control li:last-child {
 90     position: absolute;
 91     right: 0;
 92 }
 93
 94 .html5_video_mute1 {
 95     background: url("http://localhost/twitter/images/html5_video.jpg")
 96         no-repeat scroll -79px -170px rgba(0, 0, 0, 0);
 97 }
 98
 99 .html5_video_mute {
100     background: url("http://localhost/twitter/images/html5_video.jpg")
101         no-repeat scroll 0 -170px rgba(0, 0, 0, 0);
102 }
103
104 #mute_icon {
105     cursor: pointer;
106     display: inline-block;
107     height: 15px;
108     width: 18px;
109 }
110
111 .html5_video_mute:hover {
112     background: url("http://localhost/twitter/images/html5_video.jpg") -19px
113         -170px no-repeat;
114 }
115
116 #play_control li {
117     height: 40px;
118     vertical-align: top;
119     margin: 0 5px;
120 }
121
122 #play_control li:after {
123     display: inline-block;
124     width: 0;
125     height: 100%;
126     vertical-align: middle;
127     content: ‘‘;
128 }
129
130 #play_control,#video_bar,#vol_bar {
131     position: relative;
132 }
133
134 body .fullscreen {
135     position: fixed;
136     left: 0;
137     bottom: 0;
138     width: 100%;
139     overflow: hidden;
140     z-index: 2147483647;
141     background-color: #fff;
142 }
143
144 video::-webkit-media-controls {
145     display: none !important;
146 }

转载请注明：TheViper

时间： 2024-08-01 10:07:43

超简单的html5视频播放器的相关文章

打造自己的html5视频播放器

前段时间重新学习了一下html5的video部分,以前只是停留在标签的使用上,这一次决定深入了解相关的API,并运用这些API打造一个简单的视频播放器.所谓“打造自己的”,就是要自己重写video标签的控制栏部分,实现包括播放.暂停.进度和音量控制.全屏等功能,并自定义控制栏的样式.这是我自己的视频播放器的演示地址(请用chrome打开): http://animademo.sinaapp.com/html5_video/ (^-^:鼠标中键点击链接,在新标签页中打开) 这是该播放器的代码地址,

jqm视频播放器,html5视频播放器,html5音乐播放器,html5播放器,video开发demo,html5视频播放示例,html5手机视频播放器

最近在论坛中看到了很多实用html5开发视频播放,音乐播放的功能,大部分都在寻找答案.因此我就在这里做一个demo,供大家相互学习.html5开发越来越流行了,而对于视频这一块也是必不可少的一部分.如何让你的网站占据优势,就要看你的功能和用户体验了.html5对video还是做了很多优惠的东西,我们使用起来很得心应手. 在过去 flash 是网页上最好的解决视频的方法,截至到目前还算是主流,像那些优酷之类的视频网站.虾米那样的在线音乐网站,仍然使用 flash 来提供播放服务.但是这种状况将会随

HTML5视频播放器accessible html5 video player

accessible html5 video player 是一款开源的轻量级播放器,采用HTML5视频播放技术,支持字幕显示.视频自由跳播.重播等功能.该html5视频插件由paypal Accessibility 团队开发,兼容所有Firefox.chrome.以及ie10以上版本等浏览器.ie9仅支持内部视频调用. 简洁清新的视频播放界面可以让你在很短的时间内喜欢上它,至少我是真的被它的界面吸引到了,有一点遗憾的是无法全屏,如果有知道的朋友可以向大家分享! accessible html5

基于JSON数据HTML5视频播放器js插件教程

一.安装可以通过Bower来安装该视频播放器插件. bower install frame-player 在页面中引入frameplayer.css和frameplayer.js文件. <link rel="stylesheet" href="path-to/frameplayer.css"> <script src="path-to/frameplayer.js"></script> 二.Html结构在页

LZH_IJKPlayer-一个最简单使用的视频播放器，集成于bilibili开源直播播放器(ijkplayer)

随着视频直播APP的迅速发展,许多APP也都会加入直播的功能,提高用户量.在网上也是寻找了许多直播的播放器,无意间发现Bilibili开源了一款播放器ijkplayer,想从最开始的步骤集成的同学可以点进去查看集成教程.当然,我这里为大家已经都封装好啦,只要简单的几步就可以使用该播放器了.LZH_IJKPlayer点击这个就可以下载源代码了.那如何集成到你的项目中呢. 1.先看Demo 将箭头所指的两个文件夹添加到你的工程中.ijkplayer已经打包成framework了,就是图中的

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

一,VideoJS介绍引用脚本,videojs很为你着想,直接cdn了,你都不需要下载这些代码放入自己的网站 <link href="http://vjs.zencdn.net/c/video-js.css" rel="stylesheet"> <script src="http://vjs.zencdn.net/c/video.js"></script> 如果需要支持IE8,这个js可以自动生成flash

HTML5视频播放器

<div id="main"> <div id="demo" class="demo" style="width:68%; float:left;"> <video class="video" id="sp" width="100%" height="100%" controls preload controls=&

一个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:

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

突发奇想的需求,要在官网上放一个一个半小时的视频教程-- 然而,加载成了问题,页面是cshtml的.net混合网站,不知道哪儿的限制,导致视频加不出来. 没有办法,只能前端想办法了. 于是将视频切割成4个依次加载自动播放.效果还可以. 代码: 引入:<link rel="stylesheet" href="//cdn.bootcss.com/video.js/6.0.0-RC.5/alt/video-js-cdn.min.css"> <scrip