{"id":123,"date":"2011-04-20T11:22:38","date_gmt":"2011-04-20T17:22:38","guid":{"rendered":"http:\/\/timothypoon.com\/blog\/?p=123"},"modified":"2011-04-20T11:25:45","modified_gmt":"2011-04-20T17:25:45","slug":"html5-video-player-for-webkit","status":"publish","type":"post","link":"https:\/\/timothypoon.com\/blog\/2011\/04\/20\/html5-video-player-for-webkit\/","title":{"rendered":"HTML5 Video Player For WebKit"},"content":{"rendered":"

I had to play some videos in Chrome recently, but the player had to be custom for the project. Rather than tinker with some pre<\/a>–made<\/a> solutions<\/a> out there, I instead decided to do this myself and see what I could accomplish (disclaimer: I’ve actually written something like this a few times before, but I never got around to writing about it).<\/p>\n

Looking Good<\/h2>\n

The end goal was to achieve something that looks like this (in a modal overlay):<\/p>\n

\"\"<\/a><\/p>\n

The main challenge I could see would be the progress bar. Being that I only had WebKit browsers with which to concern myself, my first instinct was to use the <progress> element<\/a>. However, is it possible to style this element with CSS?<\/p>\n

Absolutely sort of! As long as you’re using a WebKit browser, it turns out that you can use the vendor-specific selector pseudo element ::-webkit-progress-bar-value<\/em> (relevant Stack Overflow post<\/a>) to style the value portion of the element in addition to the actual element itself. I’m sure the other engines will follow suit eventually, but it’s just WebKit for now.<\/p>\n

Here’s the HTML structure I ended up with:<\/p>\n

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<\/div><\/td>
<div<\/span><\/a> class<\/span>=<\/span>"video-player-wrapper"<\/span>><\/span>
\n    <div<\/span><\/a> class<\/span>=<\/span>"video-player"<\/span>><\/span>
\n        <video><\/span>
\n            <source src<\/span>=<\/span>"\/video.ogv"<\/span> type<\/span>=<\/span>'video\/ogg; codecs="theora, vorbis"'<\/span>><\/span>
\n        <\/<\/span>video><\/span>
\n        <div<\/span><\/a> class<\/span>=<\/span>"video-player-bar"<\/span>><\/span>
\n            <button<\/span><\/a> class<\/span>=<\/span>"video-player-play"<\/span>><\/<\/span>button<\/span><\/a>><\/span>
\n            <span<\/span><\/a> class<\/span>=<\/span>"video-player-timer"<\/span>><\/span>0.00<\/<\/span>span<\/span><\/a>><\/span>
\n            <progress class<\/span>=<\/span>"video-player-seek"<\/span>><\/span>0.00<\/<\/span>progress><\/span>
\n            <span<\/span><\/a> class<\/span>=<\/span>"video-player-duration"<\/span>><\/span>0.00<\/<\/span>span<\/span><\/a>><\/span>
\n            <a<\/span><\/a> class<\/span>=<\/span>"video-player-knob"<\/span>><\/<\/span>a<\/span><\/a>><\/span>
\n        <\/<\/span>div<\/span><\/a>><\/span>
\n    <\/<\/span>div<\/span><\/a>><\/span>
\n    <a<\/span><\/a> class<\/span>=<\/span>"video-player-skip"<\/span>><\/<\/span>a<\/span><\/a>><\/span>
\n<\/<\/span>div<\/span><\/a>><\/span><\/div><\/td><\/tr><\/tbody><\/table><\/div>\n

As a side note, I put an .ogv video file in there just to remind you that they are the preferred format for HTML5 videos. In my experience, other formats such as .mp4 will occasionally freeze Chrome and probably make you sad. I’ve encountered some issues with .webm, too, while .ogv and .m4v have yet to halt my browser.<\/p>\n

Here’s the CSS to make things look like they should:<\/p>\n

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
<\/div><\/td>
.video-player-wrapper<\/span> {<\/span>
\n    top<\/span>:<\/span>0<\/span>;<\/span>
\n    left<\/span>:<\/span>0<\/span>;<\/span>
\n    width<\/span>:<\/span>100%<\/span>;<\/span>
\n    height<\/span>:<\/span>100%<\/span>;<\/span>
\n    z-index<\/span>:<\/span>9999<\/span>;<\/span>
\n    color<\/span>:<\/span>#FFFFFF<\/span>;<\/span>
\n    position<\/span>:<\/span>absolute<\/span>;<\/span>
\n    background<\/span>:<\/span>rgba<\/span>(<\/span>0<\/span>,<\/span>0<\/span>,<\/span>0<\/span>,<\/span>.85)<\/span>;<\/span>
\n    -webkit-user-select:<\/span>none<\/span>;<\/span>
\n}<\/span>
\n    .video-player-wrapper<\/span> .video-player-skip<\/span> {<\/span>
\n        width<\/span>:<\/span>40px<\/span>;<\/span>
\n        height<\/span>:<\/span>40px<\/span>;<\/span>
\n        border<\/span>:<\/span>2px<\/span> solid<\/span> #FFFFFF<\/span>;<\/span>
\n        border-radius<\/span>:<\/span>20px<\/span>;<\/span>
\n        background<\/span>:<\/span>#000000<\/span>;<\/span>
\n        position<\/span>:<\/span>absolute<\/span>;<\/span>
\n        text-align<\/span>:<\/span>center<\/span>;<\/span>
\n        font-size<\/span>:<\/span>30px<\/span>;<\/span>
\n    }<\/span>
\n        .video-player-wrapper<\/span> .video-player-skip<\/span>::<\/span>before<\/span> {<\/span>
\n            content<\/span>:<\/span>'x'<\/span>;<\/span>
\n        }<\/span>
\n.video-player<\/span> {<\/span>
\n    position<\/span>:<\/span>absolute<\/span>;<\/span>
\n    overflow<\/span>:<\/span>hidden<\/span>;<\/span>
\n}<\/span>
\n.video-player-bar<\/span> {<\/span>
\n    position<\/span>:<\/span>absolute<\/span>;<\/span>
\n    bottom<\/span>:<\/span>0<\/span>;<\/span>
\n    left<\/span>:<\/span>0<\/span>;<\/span>
\n    width<\/span>:<\/span>100%<\/span>;<\/span>
\n    height<\/span>:<\/span>65px<\/span>;<\/span>
\n    background<\/span>:<\/span>-webkit-linear-gradient(<\/span>left<\/span>,<\/span>rgba<\/span>(<\/span>0<\/span>,<\/span>0<\/span>,<\/span>0<\/span>,<\/span>.7)<\/span> 0px<\/span>,<\/span>rgba<\/span>(<\/span>0<\/span>,<\/span>0<\/span>,<\/span>0<\/span>,<\/span>.7)<\/span> 95px<\/span>,<\/span>transparent<\/span> 95px<\/span>,<\/span>transparent<\/span> 98px<\/span>,<\/span>rgba<\/span>(<\/span>0<\/span>,<\/span>0<\/span>,<\/span>0<\/span>,<\/span>.7)<\/span> 98px<\/span>)<\/span>;<\/span>
\n    -webkit-transition:<\/span>bottom<\/span> .4s<\/span> ease-in;<\/span>
\n}<\/span>
\n    .video-player-bar<\/span>.hide<\/span> {<\/span>
\n        bottom<\/span>:<\/span>-65px<\/span>;<\/span>
\n    }<\/span>
\n    .video-player-knob<\/span> {<\/span>
\n        display<\/span>:<\/span>block<\/span>;<\/span>
\n        position<\/span>:<\/span>absolute<\/span>;<\/span>
\n        background<\/span>:<\/span>#FFF<\/span>;<\/span>
\n        border-radius<\/span>:<\/span>22px<\/span>;<\/span>
\n        width<\/span>:<\/span>44px<\/span>;<\/span>
\n        height<\/span>:<\/span>44px<\/span>;<\/span>
\n        bottom<\/span>:<\/span>46px<\/span>;<\/span>
\n        left<\/span>:<\/span>161px<\/span>;<\/span>
\n        opacity<\/span>:<\/span>.6;<\/span>
\n        -webkit-box-shadow:<\/span>0<\/span> 0<\/span> 3px<\/span> rgba<\/span>(<\/span>0<\/span>,<\/span>0<\/span>,<\/span>0<\/span>,<\/span>.8)<\/span>;<\/span>
\n        -webkit-transition:<\/span>opacity .4s<\/span> ease-in;<\/span>
\n    }<\/span>
\n        .video-player-knob<\/span>::<\/span>before<\/span> {<\/span>
\n            content<\/span>:<\/span>''<\/span>;<\/span>
\n            display<\/span>:<\/span>block<\/span>;<\/span>
\n            width<\/span>:<\/span>1px<\/span>;<\/span>
\n            background<\/span>:<\/span>#FFF<\/span>;<\/span>
\n            height<\/span>:<\/span>16px<\/span>;<\/span>
\n            bottom<\/span>:<\/span>-16px<\/span>;<\/span>
\n            left<\/span>:<\/span>21px<\/span>;<\/span>
\n            position<\/span>:<\/span>absolute<\/span>;<\/span>
\n        }<\/span>
\n        .video-player-bar<\/span>.hide<\/span> .video-player-knob<\/span> {<\/span>
\n            opacity<\/span>:<\/span>0<\/span>;<\/span>
\n        }<\/span>
\n    .video-player-bar<\/span> .video-player-play<\/span> {<\/span>
\n        display<\/span>:<\/span>inline-block<\/span>;<\/span>
\n        height<\/span>:<\/span>100%<\/span>;<\/span>
\n        width<\/span>:<\/span>95px<\/span>;<\/span>
\n        border<\/span>:<\/span>none<\/span>;<\/span>
\n        -webkit-box-sizing:<\/span>border-box<\/span>;<\/span>
\n        padding<\/span>:<\/span>0<\/span>;<\/span>
\n        margin-right<\/span>:<\/span>16px<\/span>;<\/span>
\n        background<\/span>:<\/span>transparent<\/span>;<\/span>
\n        text-align<\/span>:<\/span>center<\/span>;<\/span>
\n    }<\/span>
\n        .video-player-bar<\/span> .video-player-play<\/span>:<\/span>before<\/span>,<\/span> .video-player-bar<\/span> .video-player-play<\/span>:<\/span>after<\/span> {<\/span>
\n            content<\/span>:<\/span>''<\/span>;<\/span>
\n            display<\/span>:<\/span>inline-block<\/span>;<\/span>
\n        }<\/span>
\n        .video-player-bar<\/span> .video-player-play<\/span>.play<\/span>:<\/span>before<\/span> {<\/span>
\n            border-style<\/span>:<\/span>solid<\/span>;<\/span>
\n            border-width<\/span>:<\/span>12px<\/span>;<\/span>
\n            border-color<\/span>:<\/span>transparent<\/span> transparent<\/span> transparent<\/span> #FFF<\/span>;<\/span>
\n            margin<\/span>:<\/span>5px<\/span> 0<\/span> 0<\/span> 9px<\/span>;<\/span>
\n        }<\/span>
\n        .video-player-bar<\/span> .video-player-play<\/span>.pause<\/span>:<\/span>before<\/span>,<\/span> .video-player-bar<\/span> .video-player-play<\/span>.pause<\/span>:<\/span>after<\/span> {<\/span>
\n            width<\/span>:<\/span>5px<\/span>;<\/span>
\n            height<\/span>:<\/span>24px<\/span>;<\/span>
\n            background<\/span>:<\/span>#FFF<\/span>;<\/span>
\n            margin<\/span>:<\/span>5px<\/span> 3px<\/span> 0<\/span> 3px<\/span>;<\/span>
\n        }<\/span>
\n    .video-player-bar<\/span> span {<\/span>
\n        font-size<\/span>:<\/span>21px<\/span>;<\/span>
\n        width<\/span>:<\/span>50px<\/span>;<\/span>
\n        margin<\/span>:<\/span>23px<\/span> 11px<\/span> 0<\/span> 11px<\/span>;<\/span>
\n        display<\/span>:<\/span>inline-block<\/span>;<\/span>
\n        vertical-align<\/span>:<\/span>top<\/span>;<\/span>
\n        text-shadow<\/span>:<\/span>0<\/span> 0<\/span> 4px<\/span> rgba<\/span>(<\/span>0<\/span>,<\/span>0<\/span>,<\/span>0<\/span>,<\/span>.8)<\/span>;<\/span>
\n    }<\/span>
\n.video-player-bar<\/span> .video-player-seek<\/span> {<\/span>
\n    height<\/span>:<\/span>4px<\/span>;<\/span>
\n    width<\/span>:<\/span>100px<\/span>;<\/span>
\n    border-radius<\/span>:<\/span>2px<\/span>;<\/span>
\n    background<\/span>:<\/span>#FFF<\/span>;<\/span>
\n    margin<\/span>:<\/span>31px<\/span> 10px<\/span> 0<\/span> 0<\/span>;<\/span>
\n    vertical-align<\/span>:<\/span>top<\/span>;<\/span>
\n    -webkit-appearance:<\/span>none<\/span>;<\/span>
\n}<\/span>
\n    .video-player-bar<\/span> .video-player-seek<\/span>::<\/span>-webkit-progress-bar-value {<\/span>
\n        background<\/span>:<\/span>-webkit-linear-gradient(<\/span>top<\/span>,<\/span> #37d0ff<\/span>,<\/span> #35addb<\/span>)<\/span>;<\/span>
\n        border-radius<\/span>:<\/span>2px<\/span>;<\/span>
\n    }<\/span><\/div><\/td><\/tr><\/tbody><\/table><\/div>\n

You’ll notice all the special CSS3 things like box shadows and gradients are WebKit-specific. Other vendor prefixes for Mozilla and Opera (and the CSS3 standard) can be added if necessary.<\/p>\n

The jQuery Magic<\/h2>\n

Although not written as a jQuery plug-in (which will probably happen at some point down the line), this puppy does<\/em> use it to make things easier on the JavaScript side of things.<\/p>\n

First is to set up the videoPlayer object. This includes extending user options with the defaults, instantiating the object status variables, and creating and adding the new DOM elements:<\/p>\n

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<\/div><\/td>
var<\/span> $this =<\/span> this<\/span>;<\/span>
\n
\nthis<\/span>.settings<\/span> =<\/span> {<\/span>autoOpen:<\/span>true<\/span>,<\/span> autoPlay:<\/span>true<\/span>,<\/span> autoClose:<\/span>true<\/span>,<\/span> controlTimeout:<\/span>3500<\/span>,<\/span> skip:<\/span>function<\/span>(<\/span>)<\/span>{<\/span> $this.close<\/span>(<\/span>)<\/span>;<\/span> }<\/span>,<\/span> close:<\/span>function<\/span>(<\/span>)<\/span>{<\/span>}<\/span>,<\/span> open:<\/span>function<\/span>(<\/span>)<\/span>{<\/span>}<\/span>}<\/span>;<\/span>
\n$.extend<\/span>(<\/span>this<\/span>.settings<\/span>,<\/span> options)<\/span>;<\/span>
\n
\nthis<\/span>.opened<\/span> =<\/span> false<\/span>;<\/span>
\nthis<\/span>.htimer<\/span> =<\/span> null<\/span>;<\/span>
\nthis<\/span>.seeking<\/span> =<\/span> false<\/span>;<\/span>
\nthis<\/span>.control<\/span> =<\/span> false<\/span>;<\/span>
\n
\nthis<\/span>.$elem =<\/span> $elem.css<\/span>(<\/span>'pointer-events'<\/span>,<\/span>'none'<\/span>)<\/span>;<\/span>
\nthis<\/span>.video<\/span> =<\/span> $elem.get<\/span>(<\/span>0<\/span>)<\/span>;<\/span>
\nthis<\/span>.$play =<\/span> $(<\/span>'<button class="video-player-play pause">'<\/span>)<\/span>;<\/span>
\nthis<\/span>.$time =<\/span> $(<\/span>'<span class="video-player-timer">0.00<\/span>'<\/span>)<\/span>;<\/span>
\nthis<\/span>.$seek =<\/span> $(<\/span>'<progress class="video-player-seek" value="0" max="0">0%<\/progress>'<\/span>)<\/span>;<\/span>
\nthis<\/span>.$maxt =<\/span> $(<\/span>'<span class="video-player-duration">0.00<\/span>'<\/span>)<\/span>;<\/span>
\nthis<\/span>.$ctrl =<\/span> $(<\/span>'<div class="video-player-bar hide">'<\/span>)<\/span>;<\/span>
\nthis<\/span>.$knob =<\/span> $(<\/span>'<a class="video-player-knob">'<\/span>)<\/span>;<\/span>
\nthis<\/span>.$skip =<\/span> $(<\/span>'<a class="video-player-skip">'<\/span>)<\/span>;<\/span>
\nthis<\/span>.$skin =<\/span> $(<\/span>'<div class="video-player">'<\/span>)<\/span>.width<\/span>(<\/span>$elem.width<\/span>(<\/span>)<\/span>)<\/span>.height<\/span>(<\/span>$elem.height<\/span>(<\/span>)<\/span>)<\/span>.append<\/span>(<\/span>$elem)<\/span>.append<\/span>(<\/span>$this.$ctrl.append<\/span>(<\/span>$this.$play)<\/span>.append<\/span>(<\/span>$this.$time)<\/span>.append<\/span>(<\/span>$this.$seek)<\/span>.append<\/span>(<\/span>$this.$maxt)<\/span>.append<\/span>(<\/span>$this.$knob)<\/span>)<\/span>;<\/span>
\nthis<\/span>.$wrap =<\/span> $(<\/span>'<div class="video-player-wrapper">'<\/span>)<\/span>.css<\/span>(<\/span>'display'<\/span>,<\/span>'none'<\/span>)<\/span>.appendTo<\/span>(<\/span>'body'<\/span>)<\/span>.append<\/span>(<\/span>this<\/span>.$skin)<\/span>.append<\/span>(<\/span>this<\/span>.$skip)<\/span>;<\/span><\/div><\/td><\/tr><\/tbody><\/table><\/div>\n

Most of the methods like play()<\/em> and pause()<\/em> are pretty self-explanatory, but setTime()<\/em> and setPosition()<\/em> are somewhat complex:<\/p>\n

1
2
3
4
5
6
7
8
9
10
11
12
13
<\/div><\/td>
this<\/span>.setTime<\/span> =<\/span> function<\/span>(<\/span>time)<\/span>{<\/span>
\n    time =<\/span> parseFloat(<\/span>time)<\/span>;<\/span>
\n    var<\/span> vduration =<\/span> parseFloat(<\/span>$this.$elem.attr<\/span>(<\/span>'duration'<\/span>)<\/span>)<\/span>;<\/span>
\n    if<\/span>(<\/span>time ><\/span> vduration)<\/span> time =<\/span> vduration;<\/span>
\n    else<\/span> if<\/span>(<\/span>time <<\/span> 0<\/span>)<\/span> time =<\/span> 0<\/span>;<\/span>
\n    $this.$elem.attr<\/span>(<\/span>'currentTime'<\/span>,<\/span>time)<\/span>;<\/span>
\n    $this.$time.html<\/span>(<\/span>$this.formatTime<\/span>(<\/span>time)<\/span>)<\/span>;<\/span>
\n    $this.$seek.val<\/span>(<\/span>time)<\/span>.html<\/span>(<\/span>time \/<\/span> vduration)<\/span>;<\/span>
\n    $this.$knob.css<\/span>(<\/span>'left'<\/span>,<\/span>(<\/span>$this.$seek.offset<\/span>(<\/span>)<\/span>.left<\/span> -<\/span> $this.$skin.offset<\/span>(<\/span>)<\/span>.left<\/span>)<\/span> +<\/span> (<\/span>$this.$seek.width<\/span>(<\/span>)<\/span> *<\/span> (<\/span>time \/<\/span> vduration)<\/span>)<\/span> -<\/span> (<\/span>$this.$knob.width<\/span>(<\/span>)<\/span> \/<\/span> 2<\/span>)<\/span>)<\/span>;<\/span>
\n}<\/span>;<\/span>
\nthis<\/span>.setPosition<\/span> =<\/span> function<\/span>(<\/span>pageX)<\/span> {<\/span>
\n    $this.setTime<\/span>(<\/span>parseFloat(<\/span>(<\/span>pageX -<\/span> $this.$seek.offset<\/span>(<\/span>)<\/span>.left<\/span>)<\/span> \/<\/span> $this.$seek.width<\/span>(<\/span>)<\/span>)<\/span> *<\/span> parseFloat(<\/span>$this.$elem.attr<\/span>(<\/span>'duration'<\/span>)<\/span>)<\/span>)<\/span>;<\/span>
\n}<\/span>;<\/span><\/div><\/td><\/tr><\/tbody><\/table><\/div>\n

setPosition()<\/em> takes an x-position of the page and converts it to a time within the range of the video’s duration. If the x-position is to the left of the seek bar, the time is set to zero. If the x-position is to the right of the seek bar, the time is set to the video’s duration (and subsequently will stop). If the x-position is within the left and right x-positions of the seek bar, then we take its position ratio against the video’s duration and uses setTime()<\/em> to set the place in the video playback.<\/p>\n

One other thing that might jump out at you is the createSeek()<\/em>:<\/p>\n

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<\/div><\/td>
\/\/ Things don't really start until the video is ready, i.e. video.readyState == true<\/span>
\nvar<\/span> createSeek =<\/span> function<\/span>(<\/span>)<\/span>{<\/span>
\n    if<\/span>(<\/span>$this.$elem.attr<\/span>(<\/span>'readyState'<\/span>)<\/span>)<\/span> {<\/span>
\n        var<\/span> updateTime =<\/span> function<\/span>(<\/span>ev)<\/span>{<\/span>
\n            if<\/span>(<\/span>!<\/span>$this.seeking<\/span>)<\/span> {<\/span>
\n                $this.setTime<\/span>(<\/span>$this.$elem.attr<\/span>(<\/span>'currentTime'<\/span>)<\/span>)<\/span>;<\/span>
\n                if<\/span>(<\/span>$this.$elem.attr<\/span>(<\/span>'currentTime'<\/span>)<\/span> >=<\/span> $this.$elem.attr<\/span>(<\/span>'duration'<\/span>)<\/span>)<\/span> {<\/span>
\n                    $this.stop<\/span>(<\/span>)<\/span>;<\/span>
\n                    if<\/span>(<\/span>$this.settings<\/span>.autoClose<\/span>)<\/span> $this.close<\/span>(<\/span>)<\/span>;<\/span>
\n                }<\/span>
\n            }<\/span>
\n        }<\/span>;<\/span>
\n        $this.$seek.attr<\/span>(<\/span>'max'<\/span>,<\/span> $this.$elem.attr<\/span>(<\/span>'duration'<\/span>)<\/span>)<\/span>;<\/span>
\n        $this.$maxt.html<\/span>(<\/span>$this.formatTime<\/span>(<\/span>$this.$elem.attr<\/span>(<\/span>'duration'<\/span>)<\/span>)<\/span>)<\/span>;<\/span>
\n        $this.$elem.bind<\/span>(<\/span>'timeupdate'<\/span>,<\/span> updateTime)<\/span>;<\/span>
\n        if<\/span>(<\/span>$this.settings<\/span>.autoOpen<\/span>)<\/span> $this.open<\/span>(<\/span>)<\/span>;<\/span>
\n        updateTime(<\/span>)<\/span>;<\/span>
\n    }<\/span>
\n    else<\/span> {<\/span>
\n        setTimeout(<\/span>createSeek,<\/span> 150<\/span>)<\/span>;<\/span>
\n    }<\/span>
\n}<\/span>;<\/span>
\ncreateSeek(<\/span>)<\/span>;<\/span><\/div><\/td><\/tr><\/tbody><\/table><\/div>\n

This function isn’t called ever again (or at least shouldn’t be) and is truly only used for object instantiation. You have to wait for the video DOM element to return a readyState<\/strong> attribute so you know the video is loaded and ready to play. Otherwise, you just set a timeout to keep checking the readyState<\/strong> until the video is ready so you can apply the updateTime()<\/em> function to the timeupdate<\/strong> event of the video.<\/p>\n

Lastly, there’s just a little bit of fun geometry. It moves the skip\/close button to the very upper-right corner of the video player.<\/p>\n

\"\"<\/a><\/p>\n

This is done by finding the distance from the center of the element to one of its corners (its a square in the DOM even though it renders as a circle), subtracting the radius of the circle (which is also half the width of the square), and using the resulting value as the hypotenuse of an isosceles right triangle whose other sides are used as offsets from the top right corner of the video player.<\/p>\n

1
2
3
4
5
<\/div><\/td>
\/\/ Move the skip\/close button to the very top right corner of the player<\/span>
\nvar<\/span> w =<\/span> this<\/span>.$skip.width<\/span>(<\/span>)<\/span>,<\/span>
\n    n =<\/span> (<\/span>Math<\/span>.sqrt<\/span>(<\/span>Math<\/span>.pow<\/span>(<\/span>w,<\/span> 2<\/span>)<\/span> +<\/span> Math<\/span>.pow<\/span>(<\/span>w,<\/span> 2<\/span>)<\/span>)<\/span> \/<\/span> 2<\/span>)<\/span> -<\/span> (<\/span>w \/<\/span> 2<\/span>)<\/span>,<\/span>
\n    o =<\/span> Math<\/span>.sqrt<\/span>(<\/span>Math<\/span>.pow<\/span>(<\/span>n,<\/span> 2<\/span>)<\/span> \/<\/span> 2<\/span>)<\/span>;<\/span>
\nthis<\/span>.$skip.offset<\/span>(<\/span>{<\/span>left:<\/span>(<\/span>parseInt(<\/span>this<\/span>.$skin.css<\/span>(<\/span>'left'<\/span>)<\/span>)<\/span> +<\/span> this<\/span>.$skin.width<\/span>(<\/span>)<\/span>)<\/span> -<\/span> o,<\/span> top:<\/span>parseInt(<\/span>this<\/span>.$skin.css<\/span>(<\/span>'top'<\/span>)<\/span>)<\/span> -<\/span> this<\/span>.$skip.height<\/span>(<\/span>)<\/span> +<\/span> o}<\/span>)<\/span>;<\/span><\/div><\/td><\/tr><\/tbody><\/table><\/div>\n

In Conclusion<\/h2>\n

That’s that! If you want to read about how to use it, check out my GitHub for this particular little doodad<\/a>. There are still a few things left to do, or at least things I’d like to eventually get around to doing since in its current state, this guy does exactly what I need it to do.<\/p>\n