FazBrowse GitHub Viewer
|
Trending
|
URL:
|
Home
Tools:
[Download Repo ZIP]
[View Raw Code]
[Original HTTPS Page]
frontend/static/src/javascripts/bootstraps/videojs-embed.js at master · devhttps/frontend · GitHub
devhttps
/
frontend
Public
forked from
guardian/frontend
Notifications
You must be signed in to change notification settings
Fork
0
Star
0
Code
Pull requests
0
Actions
Projects
Wiki
Security and quality
0
Insights
Additional navigation options
Code
Pull requests
Actions
Projects
Wiki
Security and quality
Insights
Expand file tree
Breadcrumbs
frontend
/
static
/
src
/
javascripts
/
bootstraps
/
videojs-embed.js
Copy path
More file actions
More file actions
Latest commit
History
History
History
140 lines (117 loc) · 4.56 KB
Breadcrumbs
frontend
/
static
/
src
/
javascripts
/
bootstraps
/
videojs-embed.js
Copy path
File metadata and controls
140 lines (117 loc) · 4.56 KB
Raw
Copy raw file
Download raw file
Open symbols panel
Edit and raw actions
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
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
//
@flow
import
bonzo
from
'bonzo'
;
import
qwery
from
'qwery'
;
import
videojs
from
'videojs'
;
import
'videojs-embed'
;
import
$
from
'lib/$'
;
import
config
from
'lib/config'
;
import
deferToAnalytics
from
'lib/defer-to-analytics'
;
import
template
from
'lodash/utilities/template'
;
import
{
Component
}
from
'common/modules/component'
;
import
events
from
'common/modules/video/events'
;
import
{
fullscreener
}
from
'common/modules/media/videojs-plugins/fullscreener'
;
import
{
inlineSvg
}
from
'common/views/svgs'
;
import
loadingTmpl
from
'raw-loader!common/views/ui/loading.html'
;
import
titlebarTmpl
from
'raw-loader!common/views/media/titlebar.html'
;
import
debounce
from
'lodash/functions/debounce'
;
import
videojsOptions
from
'common/modules/video/videojs-options'
;
// Let webpack know where to get files from
// __webpack_public_path__ is a special webpack variable
// https://webpack.js.org/guides/public-path/#set-value-on-the-fly
// eslint-disable-next-line camelcase,no-undef
__webpack_public_path__
=
`
${
config
.
get
(
'page.assetsPath'
)
}
javascripts/`
;
const
initLoadingSpinner
=
(
player
:
any
)
:
void
=>
{
player
.
loadingSpinner
.
contentEl
(
)
.
innerHTML
=
loadingTmpl
;
}
;
const
createVideoPlayer
=
(
el
:
HTMLVideoElement
,
options
:
Object
)
:
any
=>
videojs
(
el
,
options
)
;
const
addTitleBar
=
(
)
:
void
=>
{
const
data
=
{
webTitle
:
config
.
get
(
'page.webTitle'
)
,
pageId
:
config
.
get
(
'page.pageId'
)
,
icon
:
inlineSvg
(
'marque36icon'
)
,
}
;
$
(
'.vjs-control-bar'
)
.
after
(
template
(
titlebarTmpl
,
data
)
)
;
}
;
const
initEndSlate
=
(
player
:
any
)
:
void
=>
{
const
endSlate
=
new
Component
(
)
;
const
endState
=
'vjs-has-ended'
;
endSlate
.
endpoint
=
$
(
'.js-gu-media--enhance'
)
.
first
(
)
.
attr
(
'data-end-slate'
)
;
endSlate
.
fetch
(
player
.
el
(
)
,
'html'
)
.
then
(
(
)
=>
{
$
(
'.end-slate-container .fc-item__action'
)
.
each
(
e
=>
{
e
.
href
+=
'?CMP=embed_endslate'
;
}
)
;
}
)
;
player
.
on
(
'ended'
,
(
)
=>
{
bonzo
(
player
.
el
(
)
)
.
addClass
(
endState
)
;
}
)
;
player
.
on
(
'playing'
,
(
)
=>
{
bonzo
(
player
.
el
(
)
)
.
removeClass
(
endState
)
;
}
)
;
}
;
const
initPlayer
=
(
)
:
void
=>
{
videojs
.
plugin
(
'fullscreener'
,
fullscreener
)
;
bonzo
(
qwery
(
'.js-gu-media--enhance'
)
)
.
each
(
el
=>
{
const
$el
=
bonzo
(
el
)
.
addClass
(
'vjs'
)
;
const
mediaId
=
$el
.
attr
(
'data-media-id'
)
;
const
canonicalUrl
=
$el
.
attr
(
'data-canonical-url'
)
;
const
gaEventLabel
=
canonicalUrl
;
const
mediaType
=
el
.
tagName
.
toLowerCase
(
)
;
bonzo
(
el
)
.
addClass
(
'vjs'
)
;
const
player
=
createVideoPlayer
(
el
,
videojsOptions
(
{
controls
:
true
,
autoplay
:
!
!
window
.
location
.
hash
&&
window
.
location
.
hash
===
'#autoplay'
,
preload
:
'metadata'
,
// preload='none' & autoplay breaks ad loading on chrome35
plugins
:
{
embed
:
{
embeddable
:
config
.
get
(
'switches.externalVideoEmbeds'
)
&&
config
.
get
(
'page.embeddable'
)
,
location
:
`
${
config
.
get
(
'page.externalEmbedHost'
)
}
/embed/video/
${
config
.
get
(
'page.pageId'
)
}
`
,
}
,
}
,
}
)
)
;
// Location of this is important
events
.
handleInitialMediaError
(
player
)
;
player
.
ready
(
(
)
=>
{
initLoadingSpinner
(
player
)
;
addTitleBar
(
)
;
initEndSlate
(
player
)
;
events
.
bindGlobalEvents
(
player
)
;
// unglitching the volume on first load
const
vol
=
player
.
volume
(
)
;
if
(
vol
)
{
player
.
volume
(
0
)
;
player
.
volume
(
vol
)
;
}
player
.
fullscreener
(
)
;
if
(
config
.
get
(
'switches.thirdPartyEmbedTracking'
)
)
{
deferToAnalytics
(
(
)
=>
{
events
.
initOphanTracking
(
player
,
mediaId
)
;
events
.
bindContentEvents
(
player
)
;
}
)
;
}
events
.
addContentEvents
(
player
,
mediaId
,
mediaType
)
;
events
.
bindContentEvents
(
player
)
;
events
.
bindGoogleAnalyticsEvents
(
player
,
gaEventLabel
)
;
}
)
;
const
mouseMoveIdle
=
debounce
(
(
)
=>
{
player
.
removeClass
(
'vjs-mousemoved'
)
;
}
,
500
)
;
// built in vjs-user-active is buggy so using custom implementation
player
.
on
(
'mousemove'
,
(
)
=>
{
player
.
addClass
(
'vjs-mousemoved'
)
;
mouseMoveIdle
(
)
;
}
)
;
}
)
;
}
;
initPlayer
(
)
;
Back
|
FazBrowse Home
|
New Git URL