`
wjlgryx
  • 浏览: 308525 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

Building a better HTML5 video player with Glow

阅读更多

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:

HTML5 & Glow Video Player

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 videoelement.

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 (endedpaused 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:

HTML5 & Glow Video Player

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.

分享到:
评论

相关推荐

    AE插件LF GLOW

    5. **非破坏性编辑**:像大多数AE插件一样,LF Glow很可能支持非破坏性编辑,意味着对原始素材的改动不会永久保存,用户可以随时调整效果参数而不会丢失原始数据。 6. **预设系统**:可能内置了多种预设效果,用户...

    MK Glow 4.1.0.rar

    《Unity中的MK Glow 4.1.0:打造绚丽发光特效》 在Unity游戏开发中,视觉效果的呈现是至关重要的,它能够极大地提升玩家的游戏体验。MK Glow 4.1.0是一款专为Unity设计的高质量发光效果资源包,为开发者提供了强大...

    前端开源库-glow

    【前端开源库-glow】是前端开发者们常用的一个开源库,其主要功能是为Web页面元素添加发光效果,使得交互更为生动和引人注目。这个库尤其适用于那些需要强调某些元素或者希望创建视觉吸引力强的用户体验的项目。在...

    Highlight+Glow+System+v5

    根据提供的信息,“Highlight+Glow+System+v5”似乎是与Unity 3D(U3D)游戏开发相关的资源包或工具集。虽然没有提供具体内容,但从标题和描述中可以推测出这是一套用于Unity 3D环境中的光照、高光效果处理系统。接...

    final glow插件

    5. **效率优化**:尽管增加了复杂的光照效果,Final Glow在渲染速度上做了优化,减少了对计算资源的需求。 总的来说,Final Glow插件是3DS Max用户提高作品质量、创造独特视觉体验的重要工具。通过学习和熟练掌握其...

    glow11+UNITY3D+自发光光晕插件.zip

    《Unity3D自发光光晕插件:Glow11详解》 Unity3D作为一款强大的游戏开发引擎,被广泛应用于各种2D、3D游戏的制作。在视觉效果方面,自发光光晕(Glow)是提升游戏画面质量的重要手段之一。本文将围绕“glow11+UNITY...

    Glow 11 光晕发光插件

    【Glow 11 光晕发光插件】是一款专为Unity3D游戏引擎设计的高级光照和光晕效果增强工具。这款插件的核心功能在于提供高质量的自发光(Self-Illumination)效果,使场景中的物体在特定条件下能够呈现出自然且引人注目...

    PS插件 光效发光效果滤镜插件 Topaz Glow v2.0.0

    **PS插件 光效发光效果滤镜插件 Topaz Glow v2.0.0** 在数字图像处理领域,Adobe Photoshop是一款广泛使用的专业图像编辑软件,而PS插件则为这款强大的工具添加了更多功能。Topaz Glow v2.0.0就是这样一个专门针对...

    LF Glow 免安装 32位

    LF Glow 免安装 32位

    Glow11 Unity3d光晕特效

    5. **易用性**:通过简单的拖放操作,开发者可以将Glow11集成到任何Unity3d项目中,无需复杂的编程工作。 四、使用流程 在使用Glow11时,首先需要将压缩包中的`Glow 11_1.07.unitypackage`导入到Unity3d项目中。...

    Glow 2.9.1-cn

    Glow 软件大小:10.76 M 版本号:2.9.1-cn 更新时间:2015-01-07 包名:com.glow.android 权限详情:▪ 查看网络状态▪ 作为帐户身份验证程序▪ 拍摄照片和视频▪ 完全的互联网访问权限▪ 发现已知帐户▪ 管理帐户...

    MK Glow 4.1.0.zip

    《MK Glow 4.1.0 - Unity 引擎中的高级光照效果实现》 在游戏开发领域,Unity引擎因其强大的功能和易用性而备受推崇。MK Glow 4.1.0 是一个专为Unity设计的插件,它提供了一种高效且高质量的方式来实现动态光效,让...

    Glow11 自发光

    5. **蒙版**:可以通过额外的纹理或灰度值来控制发光区域,实现局部发光效果。 使用自发光材质时,需要注意以下几点: - **性能影响**:自发光会增加GPU的负担,特别是在大量物体使用自发光效果时。因此,在优化...

    Glow_1.8.0(可与其他版本共存).apk

    Glow_1.8.0(可与其他版本共存).apk

    glow11 UNITY3D 自发光光晕插件

    Glow11插件是Unity Asset Store中非常强大的自发光插件 内含3个版本 可以做自发光, 光晕等。 支持mobile High Precision:高精度 使用更高精度的RenderTexture,如果你的Inner/Outer/Boost Strength值高的话,使用...

    unity5版本所用的glow11

    unity5版本可以用的辉光插件glow11

    Mk Glow unity3d

    一款比较好使的Glow,VR上面使也没有问题

    glow11自发光插件

    glow11自发光插件

Global site tag (gtag.js) - Google Analytics