- 浏览: 297642 次
- 性别:
- 来自: 北京
文章分类
最新评论
-
开发小菜:
支持IE9以下的吗?
HTML5+CSS3+JQuery打造自定义视频播放器 -
攻城使:
开发Html5必须得下载么,我用dw编写,把文件复制到myec ...
html5开发 myeclipse安装aptana插件 -
疾风鹰狼:
...
根据判断浏览器类型屏幕分辨率自动调用不同CSS的代码 -
sardodo:
你好,我想问下,导入例子中的.dae格式模型是可以看到旋转的小 ...
c3dl 初步认识 -
BIOHAZARDX:
下载学习,初学者膜拜一下。
html5 实现动画(三)
Last year I wrote a post (Building HTML5 video controls with JavaScript) introducing the HTML5 Media Elements API and demonstrating a simple set of controls for playing video.
In this (somewhat belated) follow-up I’m going to explore building a more interactive set of controls using a JavaScript UI library; I’m going to use Glow, but it could easily be adapted to jQuery UI or similar.
You can see the player I’ll be using as an example here — although it must be stressed that it’s not a final version, for reasons I’ll cover at the end:
The markup
The video player itself is pretty straightforward:
<video autobuffer controls height="180" poster="BBB_poster.jpg" width="320"> <source src="bbb.mp4" type="video/mp4"> <source src="bbb.webm" type="video/ogg"> <source src="bbb.theora.ogg" type="video/ogg"> <img alt="Film Poster" height="180" src="BBB_poster.jpg" width="320"> </video>
The video
element has the controls
attribute set, which we’ll remove with JavaScript later. Note also the poster
attribute, which displays a still image until the video is ready to be played, at which point it displays the first frame instead.
Next there are two source
elements, which serve the video to Firefox, Opera and Chrome (ogg) and Safari (mp4). Finally there’s an img
element, which displays if the browser doesn’t have video support. Update: Added WebM support.
As for the controls, rather than list them here I’ll ask you to view the source to see what I’ve done. Basically I’ve added a bunch of form elements; two input
image
types for the play and volume icons, and two input
text
types for the duration and volume sliders. The latter two aren’t necessary, but I wanted them there for accessibility reasons.
The style
How I’ve styled the player doesn’t matter too much; I’ve been influenced by the Quicktime player for the layout of the controls, but really the CSS isn’t too important here. The only thing to note is that I’ve added some rules here for screen overlays, which I’ll explain in due course:
.overlay { background-repeat: no-repeat; height: 180px; position: absolute; width: 320px; } .paused { background-color: rgba(0,0,0,0.2); background-image: url('pause.png'); background-position: left bottom; } .play { background-image: url('play.png'); background-position: center center; }
The JavaScript
You can see all the script I’ve used in the file video.js. I’ll go through some of the more important functions in turn.
SETTING UP
The first thing I’ve done is removed the native controls from the player for people who have JS enabled, so as not to provide two conflicting sets of controls:
video[0].controls = false;
Next I’ve defined some of the key variables which I’ll be using throughout the script. One of those variables, volumeSlide, is assigned to one of Glow’s native widgets, aSlider; this will be used to control the volume:
volumeSlide = new glow.widgets.Slider('#volume',{bindTo:'#vol_count', buttons:false, step:0.1, min:0, max:1, size:70, val:1});
You can see what all the options do in the Glow documentation, but the key ones I’ve set are for it to appear in <div id=“volume”>, to have a minimum value of 0 and a max of 1, and to increment in steps of 0.1. This matches the volume setting for the video
element.
WAITING FOR THE METADATA
For the next step I’m going to create another slider, but this time for the duration/seek bar. In order to do this, however, I need to query the video’s metadata to know what the duration of the video is, and in Safari (which uses mp4 video) that doesn’t load before the rest of my JS has run.
To get around this I’ll poll the readyState
attribute every half a second — with thesetInterval
function — until it’s value is at least 1, which means the metadata has loaded; once that’s done, I’ll load the slider:
t = window.setInterval(function() { if (video[0].readyState >= 1) { window.clearInterval(t); durationSlide = new glow.widgets.Slider('#vid_duration',{bindTo:'#duration_count', buttons:false, step:1, min:1, max:Math.round(video[0].duration-1), size:260, val:0}); playVid(); } },500);
So you can see there that I’ve created the slider with a minimum value of 1 and a maximum of the duration of the video (in seconds), to increment in steps of 1. After that the setup is complete so I can begin the actual playback functions.
PLAYBACK CONTROLS
There are too many functions to go into in detail, so I’ll quickly go through what happens. First an overlay is placed over the top of the video, which begins playback when clicked. Next, event listeners are added to the play button, the volume icon, and the volume and duration sliders.
The listener on the play button runs the function playControl, which determines the state of playback (ended, paused or playing) and either plays or pauses the video accordingly. It also updates the icon to reflect its action (if it is paused, the icon changes to a play icon, and vice versa), and adds the pause overlay onto the video screen when relevant:
function playControl() { if (video[0].paused === true) { video[0].play(); /* Further functions here */ }; } else if (video[0].ended === true) { video[0].play(); /* Further functions here */ } else { video[0].pause(); /* Further functions here */ }
There’s a function called startCount which uses setInterval
to move the duration slider along by one second while the video is playing, and a function called pauseCount which uses clearInterval
to pause.
The muteToggle function does what you expect, and mutes the video; it also changes the volume icon to show that state, and disables the volume slider while it is active.
A further function, volumeIcons, sets the state of the volume icon; there are four possible icon states, which are used depending on the value of the volume.
And the last function, secondsToTime, converts second values into hour/minute/second values, allowing for the timer to be updated. This is done every second by the startCountfunction, and also used for the function which is called from the event listener on the duration slider.
That event is probably worth looking at in detail:
glow.events.addListener(durationSlide,'slideStop',function(event){ video[0].currentTime = event.currentVal; var currentSecs = secondsToTime(event.currentVal); vidTimer.text(currentSecs.h + ':' + currentSecs.m + ':' + currentSecs.s); });
Using the slideStop
event I can check when the slider has been moved, and first set the video to begin playback from that point, then update the timer with the same values. The volume slider has a similar event set on it.
Next steps
So as a reminder, here’s what I have so far:
Please bear in mind that this is very much a work in progress; I started writing the controls without Glow and introduced it at a later stage, so some of the JavaScript could do with being optimised.
The markup for the controls could also do with some extra work to make them fully accessible, which they probably aren’t right now. Also, all of the dimensions are built around this video size, and won’t scale if different sized videos are used.
I hope to return to this topic when I have more time, and create a robust set of video player controls which can be used in any site without extra work.
Please feel free to let me know if you encounter any bugs or oddities as you use this; it will help with the next stage of development.
发表评论
-
iframe 高度自适应
2011-11-03 17:07 1318转自:http://apps.hi.baidu.com/sha ... -
WordPress 博客添加新浪微博挂件:
2011-06-22 14:07 14361.点击链接http://t.sina ... -
HTML5 影音 ( Video ) 概論
2011-05-25 16:25 10031 Video介紹 引用我翻譯文檔《在HTML5頁面 ... -
HTML5 Audio Loops
2011-05-19 16:49 1242One of the neatest things abo ... -
处理火狐自动播放视频
2011-05-18 17:54 1392版权声明:转载时请 ... -
教你用HTML5开发iPhone应用程序
2011-05-13 17:38 1130你一整年都像现在一样沮丧,这我知道。所有铁杆Objecti ... -
很给力,20个HTML5视频播放器及代码
2011-05-09 14:45 1921本文来源: http://www.uleadesi ... -
HTML 5 Video概述
2011-05-09 13:32 906本文来自:http://www.xlnv.ne ... -
支持移动平台的Html5播放器
2011-05-09 13:25 2850本文转自:http://www.riameeting ... -
HTML5 API简介一(Canvas,Audio/Video,Geolocation)
2011-05-09 13:22 1505本文来自:http://www.myext.cn/web ... -
HTML5资源
2011-05-09 11:56 1148JS APIs: 选择器 W3C草案:Selecto ... -
HTML5 Audio/Video 标签,属性,方法,事件
2011-05-09 11:53 1374本文转自:http://directguo.com/blo ... -
DIV实现隐藏与显示
2011-05-06 15:23 701css中display属性的参考值: display:n ... -
HTML5+CSS3+JQuery打造自定义视频播放器
2011-05-06 12:57 6677简介HTML5的<video> ... -
HTML 5 <video> preload 属性
2011-05-06 12:54 1077设置为预加载的 video 元素: <vide ... -
HTML5 – Video
2011-05-06 12:51 998在HTML5以前若我們要在網頁中播放影片時,需要使用Act ... -
超過 23 個開源的 HTML5 影音播放器與框架
2011-05-06 12:03 7476超過 23 個開源的 HTML5 影音播放器與框架 - ... -
Ambilight для тэга video
2011-05-06 11:49 737В некоторых топовых моделях т ... -
怎样用js+html5实现视频的播放控制
2011-05-06 11:46 1358html5 代码: <video width ... -
22个HTML5的初级技巧
2011-05-06 11:45 663Web技术的发展速度太快了,如果你不与时俱进,就会被淘汰。 ...
相关推荐
It wraps all the essential elements needed for creating a game, making the task of game building very developer-friendly. Starting with a vital primer to get you up and running with your development...
Title: Building Android Games with Cocos2d-x Author: Raydelto Hernandez Length: 147 pages Edition: 1 Language: English Publisher: Packt Publishing Publication Date: 2015-03-27 ISBN-10: 1785283839 ISBN...
ae lf glow 插件,仅供学习用.
unity 发光特效资源包 MK Glow 4.1.0
Highlight+Glow+System+v5,还有一个4版本的。两个版本的,希望能帮助大家。
glow11 自发光插件
一款比较好使的Glow,VR上面使也没有问题
Glow 软件大小:10.76 M 版本号:2.9.1-cn 更新时间:2015-01-07 包名:com.glow.android 权限详情:▪ 查看网络状态▪ 作为帐户身份验证程序▪ 拍摄照片和视频▪ 完全的互联网访问权限▪ 发现已知帐户▪ 管理帐户...
LF Glow 免安装 32位
Glow_1.8.0(可与其他版本共存).apk
unity5版本可以用的辉光插件glow11
glow11自发光插件
Unity边缘光插件合集,Highlight+Glow+System+v5,支持5.0版本
前端开源库-glow发光,使你的流量误差发光
Glow 11.unitypackage Unity中非常著名的 光效果
glow11 UNITY3D 自发光光晕插件;glow11 UNITY3D 自发光光晕插件glow11 UNITY3D 自发光光晕插件;glow11 UNITY3D 自发光光晕插件
glow11+UNITY3D+自发光光晕插件
PS插件 光效发光效果滤镜插件 Topaz Glow v2.0.0
Example: Building a Telnet client. 682 Example: Uploading and downloading files... 685 Chapter 23: Client system environment..695 Basics of the client system environment695 Using the System class 698 ...
Glow 11.unitypackage Unity中非常著名的 光效果 Glow 11.unitypackage Unity中非常著名的 光效果