13 |
17 | 14 | This page is part of the posts section. 15 |
16 |
15 | {% include "header.njk" %}
16 |
17 | {% endblock %}
18 |
19 | {% block content %}
20 | {% endblock %}
21 |
22 | {% block footer %}
23 | {% include "footer.njk" %}
24 | {% endblock %}
25 | {% endblock %}
26 |
--------------------------------------------------------------------------------
/src/config/hlsjs.js:
--------------------------------------------------------------------------------
1 | // https://github.com/video-dev/hls.js
2 | export const type = 'inline'
3 | export const key = 'hlsjs'
4 | export const name = 'hls.js'
5 | export const url = 'https://github.com/video-dev/hls.js'
6 | export const srcPattern = '\\.m3u8($|\\?)'
7 | export const pkg = 'hls.js'
8 | export const jsUrl = '{{npmCdn}}/{{pkg}}@{{version}}/dist/hls.min.js'
9 | export const apiVar = 'Hls'
10 | export const version = '1.0.7'
11 | export const html = '{{video}}'
12 | export const scriptText = `
13 | if ({{apiVar}}.isSupported()) {
14 | var api = new {{apiVar}}({{options}});
15 | api.attachMedia({{node}});
16 | api.loadSource({{src}});
17 | {{callback}}(api);
18 | }
19 | `
20 |
--------------------------------------------------------------------------------
/site/src/utils/filters/section.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Split the content into excerpt and remainder
3 | *
4 | * @param {String} str
5 | * @param {String [excerpt | remainder]} section
6 | *
7 | * If excerpt or nothing is passed as an argument, we return what was before the split marker.
8 | * If remainder is passed as an argument, we return the rest of the post
9 | *
10 | */
11 | module.exports = function(str, section) {
12 | var content = new String(str);
13 | var delimit = '\n\n';
14 | var parts = content.split(delimit);
15 | var which = section == 'remainder' ? 1 : 0;
16 | if (parts.length) {
17 | return parts[which];
18 | } else {
19 | return str;
20 | }
21 | };
22 |
--------------------------------------------------------------------------------
/src/config/theoplayer.js:
--------------------------------------------------------------------------------
1 | // https://docs.theoplayer.com/getting-started/01-sdks/01-web/00-getting-started.md
2 | export const type = 'inline'
3 | export const key = 'theoplayer'
4 | export const name = 'THEOplayer'
5 | export const url = 'https://www.theoplayer.com'
6 | export const srcPattern = '\\?player=theoplayer'
7 | export const cssUrl = '{{libraryLocation}}/ui.css'
8 | export const jsUrl = '{{libraryLocation}}/THEOplayer.js'
9 | export const apiVar = 'THEOplayer'
10 | export const version = '1.x.x'
11 | export const html = ''
12 | export const scriptText = `
13 | {{callback}}(new {{apiVar}}.Player({{node}}, {
14 | {{libraryLocation}},
15 | {{license}},
16 | }));
17 | `
18 |
--------------------------------------------------------------------------------
/site/src/pages/players.njk:
--------------------------------------------------------------------------------
1 | ---js
2 | {
3 | eleventyComputed: {
4 | title: "Playerx - {{ player.name }}",
5 | },
6 | layout: "layouts/player.njk",
7 | tags: ["player"],
8 | pagination: {
9 | data: "players",
10 | size: 1,
11 | alias: "player",
12 | before: function(data) {
13 | const pages = [];
14 | data.forEach(entry => {
15 | entry.clips.forEach((src, i) => {
16 | pages.push({
17 | ...entry,
18 | src: src,
19 | clipIndex: i
20 | })
21 | })
22 | });
23 | return pages;
24 | }
25 | },
26 | permalink: "/players/{{ player.name | slug }}/{% if player.clipIndex > 0 %}{{ player.clipIndex + 1 }}/{% endif %}"
27 | }
28 | ---
29 |
--------------------------------------------------------------------------------
/site/src/pages/lighthouse.njk:
--------------------------------------------------------------------------------
1 | ---js
2 | {
3 | eleventyComputed: {
4 | title: "Playerx - {{ player.name }}",
5 | },
6 | layout: "layouts/lighthouse.njk",
7 | tags: ["player"],
8 | pagination: {
9 | data: "players",
10 | size: 1,
11 | alias: "player",
12 | before: function(data) {
13 | const pages = [];
14 | data.forEach(entry => {
15 | entry.clips.forEach((src, i) => {
16 | pages.push({
17 | ...entry,
18 | src: src,
19 | clipIndex: i
20 | })
21 | })
22 | });
23 | return pages;
24 | }
25 | },
26 | permalink: "/lighthouse/{{ player.name | slug }}/{% if player.clipIndex > 0 %}{{ player.clipIndex + 1 }}/{% endif %}"
27 | }
28 | ---
29 |
--------------------------------------------------------------------------------
/site/src/pages/demo-player.njk:
--------------------------------------------------------------------------------
1 | ---js
2 | {
3 | title: "Playerx - API Demo",
4 | layout: "layouts/demo-player.njk",
5 | tags: ["demo"],
6 | pagination: {
7 | data: "players",
8 | size: 1,
9 | addAllPagesToCollections: true,
10 | alias: "player",
11 | before: function(data) {
12 | const pages = [];
13 | data.forEach(entry => {
14 | pages.push(entry);
15 | entry.clips.slice(1).forEach((_, i) => {
16 | pages.push({
17 | ...entry,
18 | clipIndex: i + 1
19 | })
20 | })
21 | });
22 | return pages;
23 | }
24 | },
25 | permalink: "/demo/{{ player.name | slug }}/{% if player.clipIndex > 0 %}{{ player.clipIndex + 1 }}/{% endif %}"
26 | }
27 | ---
28 |
--------------------------------------------------------------------------------
/src/config/youtube.js:
--------------------------------------------------------------------------------
1 | // https://developers.google.com/youtube/iframe_api_reference
2 | export const type = 'iframe'
3 | export const key = 'youtube'
4 | export const name = 'YouTube'
5 | export const url = 'https://www.youtube.com'
6 | export const srcPattern = '(?:youtu\\.be/|youtube\\.com/(?:embed/|v/|watch\\?v=|watch\\?.+&v=))((\\w|-){11})'
7 | export const embedUrl = 'https://www.youtube.com/embed/{{metaId}}?{{params}}'
8 | export const jsUrl = 'https://www.youtube.com/iframe_api'
9 | export const apiVar = 'YT'
10 | export const apiReady = 'onYouTubeIframeAPIReady'
11 | export const version = '1.x.x'
12 | export const html = '{{iframe}}'
13 | export const scriptText = `
14 | function {{apiReady}}() {
15 | {{callback}}(new {{apiVar}}.Player({{node}}));
16 | }
17 | `
18 |
--------------------------------------------------------------------------------
/src/config/videojs.js:
--------------------------------------------------------------------------------
1 | export const type = 'inline'
2 | export const key = 'videojs'
3 | export const name = 'video.js'
4 | export const url = 'https://github.com/videojs/video.js'
5 | export const srcPattern = '\\?player=videojs'
6 | export const pkg = 'video.js'
7 | export const cssUrl = '{{npmCdn}}/{{pkg}}@{{version}}/dist/video-js.min.css'
8 | export const jsUrl = '{{npmCdn}}/{{pkg}}@${version}/dist/video.min.js'
9 | export const apiVar = 'videojs'
10 | export const version = '7.11.8'
11 | export const html = `
18 |
20 |
21 | ```html
22 |
23 |
48 |
49 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
34 |
31 |
32 |
33 |
35 |
47 |
36 |
39 |
46 |
40 |
41 |
42 |
43 |
44 |
45 |
50 | {%- for player in players | sort(true, false, 'viewer_experience_score') -%}
51 | {% if matrix.players[player.key] %}
52 |
69 |
70 |
53 |
66 | {% endif %}
67 | {%- endfor -%}
68 |
27 |
34 | `);
35 |
36 | hy(dhtml`
37 | currentTimeValue() / duration() || 0}
39 | oninput=${(e) => currentTime(e.target.value * duration())} />
40 | `);
41 |
42 | const props = {
43 | src,
44 | currentTime,
45 | ondurationchange: () => player.duration && duration(player.duration),
46 | onseeking: () => currentTimeValue(player.currentTime),
47 | onseeked: () => currentTimeValue(player.currentTime),
48 | ontimeupdate: throttle(() => {
49 | currentTimeValue(player.currentTime);
50 | }, 500),
51 | style: '--controls: none;'
52 | };
53 |
54 | let gridColsClass = observable('grid-cols-4');
55 | let players = hy(dhtml`
56 |
57 | ${[...Array(30)].map(
58 | () => dhtml`
59 |
65 | `);
66 |
67 | let player = players.querySelector('player-x');
68 |
69 | subscribe(() => {
70 | const isPaused = !playing();
71 | for (let p of players.querySelectorAll('player-x')) {
72 | if (p.paused !== isPaused) {
73 | !isPaused ? p.play() : p.pause();
74 | }
75 | }
76 | });
77 |
78 | let underlineClass = function () {
79 | const { el } = this;
80 | return computed(() => {
81 | const underline = gridColsClass() === `grid-cols-${el.textContent}`;
82 | return `grid-btn ${underline ? 'underline' : ''}`;
83 | });
84 | };
85 |
86 | hy(dhtml`
87 |
60 |
62 | `
63 | )}
64 |
88 | ${[...Array(4)].map(
89 | () => dhtml`
94 | `);
95 |
96 |
97 | function throttle(func, timeFrame) {
98 | var lastTime = 0;
99 | return function () {
100 | var now = new Date();
101 | if (now - lastTime >= timeFrame) {
102 | func();
103 | lastTime = now;
104 | }
105 | };
106 | }
107 |
--------------------------------------------------------------------------------
/site/src/images/symbol-defs.svg:
--------------------------------------------------------------------------------
1 |
25 |
--------------------------------------------------------------------------------
/site/src/js/site.js:
--------------------------------------------------------------------------------
1 | /* global galite */
2 | import { observable } from 'sinuous';
3 | import { hydrate as hy, dhtml } from 'sinuous/hydrate';
4 | import { dropdown } from './helpers/dropdown.js';
5 | import { cx } from './utils/dom.js';
6 | import { invert } from './utils/utils.js';
7 |
8 | const burgerIsActive = observable(false);
9 | const openBurgerMenu = invert(burgerIsActive);
10 | const docsDropdown = dropdown();
11 |
12 | hy(dhtml`
15 | `);
16 |
17 | hy(dhtml`
19 | `);
20 |
21 | hy(dhtml`
22 | docsDropdown.close()} />
23 | `);
24 |
25 | // hy(dhtml`
26 | //
33 | // `);
34 |
35 | hy(dhtml``);
36 |
37 | function openTweetWindow(e) {
38 | e.preventDefault();
39 | window.open(
40 | e.target.href,
41 | 'Twitter',
42 | `top=${screen.height / 2 - 285},left=${
43 | screen.width / 2 - 550 / 2
44 | },width=550,height=285,toolbar=no,location=0,status=no,menubar=no,scrollbars=yes,resizable=1`
45 | );
46 | }
47 |
48 | function prefetch(e) {
49 | if (e.target.tagName != 'A') {
50 | return;
51 | }
52 | if (e.target.origin != location.origin) {
53 | return;
54 | }
55 | var l = document.createElement('link');
56 | l.rel = 'prefetch';
57 | l.href = e.target.href;
58 | document.head.appendChild(l);
59 | }
60 | document.documentElement.addEventListener('mouseover', prefetch, {
61 | capture: true,
62 | passive: true,
63 | });
64 | document.documentElement.addEventListener('touchstart', prefetch, {
65 | capture: true,
66 | passive: true,
67 | });
68 |
69 | const GA_ID = document.documentElement.getAttribute('ga-id');
70 |
71 | galite.l = +new Date();
72 | galite('create', GA_ID, 'auto');
73 | galite('set', 'transport', 'beacon');
74 | var timeout = setTimeout(
75 | (onload = function () {
76 | clearTimeout(timeout);
77 | galite('send', 'pageview');
78 | }),
79 | 1000
80 | );
81 |
82 | var ref = +new Date();
83 | function ping(event) {
84 | var now = +new Date();
85 | if (now - ref < 1000) {
86 | return;
87 | }
88 | galite('send', {
89 | hitType: 'event',
90 | eventCategory: 'page',
91 | eventAction: event.type,
92 | eventLabel: Math.round((now - ref) / 1000),
93 | });
94 | ref = now;
95 | }
96 | addEventListener('pagehide', ping);
97 | addEventListener('visibilitychange', ping);
98 | addEventListener(
99 | 'click',
100 | function (e) {
101 | var button = e.target.closest('button');
102 | if (!button) {
103 | return;
104 | }
105 | galite('send', {
106 | hitType: 'event',
107 | eventCategory: 'button',
108 | eventAction: button.getAttribute('aria-label') || button.textContent,
109 | });
110 | },
111 | true
112 | );
113 | var selectionTimeout;
114 | addEventListener(
115 | 'selectionchange',
116 | function () {
117 | clearTimeout(selectionTimeout);
118 | var text = String(document.getSelection()).trim();
119 | if (text.split(/[\s\n\r]+/).length < 3) {
120 | return;
121 | }
122 | selectionTimeout = setTimeout(function () {
123 | galite('send', {
124 | hitType: 'event',
125 | eventCategory: 'selection',
126 | eventAction: text,
127 | });
128 | }, 2000);
129 | },
130 | true
131 | );
132 |
--------------------------------------------------------------------------------
/site/.eleventy.js:
--------------------------------------------------------------------------------
1 | const path = require('path');
2 | const yaml = require('js-yaml');
3 | const { DateTime } = require('luxon');
4 | const pluginRss = require("@11ty/eleventy-plugin-rss");
5 | const eleventyNavigationPlugin = require('@11ty/eleventy-navigation');
6 | const syntaxHighlight = require('@11ty/eleventy-plugin-syntaxhighlight');
7 |
8 | module.exports = function (eleventyConfig) {
9 | // A useful way to reference the context we are runing eleventy in
10 | let env = process.env.NODE_ENV;
11 | // make the seed target act like prod
12 | env = env == 'seed' ? 'prod' : env;
13 |
14 | eleventyConfig.setServerOptions({
15 | enabled: true,
16 | // https: true,
17 | // port: 443,
18 | port: 80,
19 | });
20 |
21 | eleventyConfig.addPlugin(pluginRss);
22 | eleventyConfig.addPlugin(eleventyNavigationPlugin);
23 | eleventyConfig.addPlugin(syntaxHighlight, {
24 | // Change which syntax highlighters are installed
25 | templateFormats: ['*'], // default
26 |
27 | // Or, just njk and md syntax highlighters (do not install liquid)
28 | templateFormats: ['njk', 'md'],
29 |
30 | // init callback lets you customize Prism
31 | init: function () {
32 | // prismTemplates(Prism);
33 | },
34 | });
35 |
36 | eleventyConfig.addDataExtension('yaml', (contents) =>
37 | yaml.load(contents)
38 | );
39 |
40 | // Layout aliases can make templates more portable
41 | eleventyConfig.addLayoutAlias('default', 'layouts/base.njk');
42 |
43 | // Add some utility filters
44 | eleventyConfig.addFilter("readableDate", dateObj => {
45 | return DateTime.fromJSDate(dateObj, {zone: 'utc'}).toFormat("dd LLL yyyy");
46 | });
47 |
48 | // https://html.spec.whatwg.org/multipage/common-microsyntaxes.html#valid-date-string
49 | eleventyConfig.addFilter('htmlDateString', (dateObj) => {
50 | return DateTime.fromJSDate(dateObj, {zone: 'utc'}).toFormat('yyyy-LL-dd');
51 | });
52 |
53 | eleventyConfig.addFilter('squash', require('./src/utils/filters/squash.js'));
54 | eleventyConfig.addFilter(
55 | 'dateDisplay',
56 | require('./src/utils/filters/date.js')
57 | );
58 |
59 | // minify the html output
60 | eleventyConfig.addTransform('htmlmin', require('./src/utils/minify-html.js'));
61 |
62 | eleventyConfig.addShortcode('getCdnUrl', function (name) {
63 | let prefix = '';
64 | if (env === 'prod') {
65 | const deps = require('./package.json').dependencies;
66 | const stripSubmod = name.replace(/\/.*$/, '');
67 | const version = deps.playerx || 'latest';
68 |
69 | const [pkg, mod] = name.split('/');
70 | return `https://cdn.jsdelivr.net/npm/playerx@${version}/+esm`;
71 |
72 | } else {
73 | const [pkg, mod] = name.split('/');
74 | return `http://localhost:8000/${mod || pkg}.js`;
75 | }
76 | });
77 |
78 | // compress and combine js files
79 | eleventyConfig.addFilter('jsmin', function (code) {
80 | if (env === 'prod') {
81 | const Terser = require('terser');
82 | let minified = Terser.minify(code);
83 | if (minified.error) {
84 | console.log('Terser error: ', minified.error);
85 | return code;
86 | }
87 | return minified.code;
88 | }
89 | return code;
90 | });
91 |
92 | // pass some assets right through
93 | eleventyConfig.addPassthroughCopy('./src/images');
94 | eleventyConfig.addPassthroughCopy('./src/fonts');
95 | eleventyConfig.addPassthroughCopy('src/favicon.ico');
96 | eleventyConfig.addPassthroughCopy('./src/js/ga.js');
97 |
98 | return {
99 | dir: {
100 | input: 'src',
101 | output: 'public',
102 | data: `_data/${env}`,
103 | },
104 | templateFormats: ['html', 'njk', 'md', '11ty.js'],
105 | htmlTemplateEngine: 'njk',
106 | markdownTemplateEngine: 'njk',
107 | passthroughFileCopy: true,
108 | };
109 | };
110 |
--------------------------------------------------------------------------------
/src/playerx.js:
--------------------------------------------------------------------------------
1 | import { SuperVideoElement } from 'super-media-element';
2 | import { options } from './options.js';
3 |
4 | const template = globalThis.document?.createElement('template');
5 | if (template) {
6 | template.innerHTML = `
7 | ${SuperVideoElement.template.innerHTML}
8 |
14 | `;
15 | }
16 |
17 | class Playerx extends SuperVideoElement {
18 | static template = template;
19 |
20 | attributeChangedCallback(attrName, oldValue, newValue) {
21 | if (newValue == oldValue) return;
22 | super.attributeChangedCallback(attrName, oldValue, newValue);
23 | }
24 |
25 | async load() {
26 | const canLoadSource = canPlayerLoadSource(this);
27 | if (!canLoadSource) {
28 | this.nativeEl?.remove();
29 | this.nativeEl = null;
30 | }
31 |
32 | if (!this.src) {
33 | return;
34 | }
35 |
36 | this.key = getCurrentPlayerConfigKey(this.src);
37 | const config = options.players[this.key];
38 | config.npmCdn = options.npmCdn;
39 |
40 | const jsUrl = config.jsUrl && populate(config.jsUrl, config);
41 | if (jsUrl) {
42 | await loadScript(jsUrl);
43 | }
44 |
45 | if (!canLoadSource && !this.querySelector(config.type)) {
46 | this.nativeEl = this.appendChild(document.createElement(config.type));
47 | }
48 |
49 | this.nativeEl.toggleAttribute('autoplay', this.autoplay);
50 | this.nativeEl.toggleAttribute('loop', this.loop);
51 | this.nativeEl.toggleAttribute('controls', this.controls);
52 | this.nativeEl.toggleAttribute('muted', this.defaultMuted || this.muted);
53 | this.nativeEl.toggleAttribute('playsinline', this.playsInline);
54 | }
55 |
56 | get api() {
57 | return this.nativeEl;
58 | }
59 | }
60 |
61 | function canPlayerLoadSource(element) {
62 | const playerParam = getSrcParam(element.src, 'player');
63 | if (playerParam && playerParam !== element.key) {
64 | return false;
65 | }
66 | return (
67 | element.api && options.players[element.key].pattern?.test(element.src)
68 | );
69 | }
70 |
71 | function getCurrentPlayerConfigKey(src) {
72 | const playerParam = getSrcParam(src, 'player');
73 | if (options.players[playerParam]) {
74 | return playerParam;
75 | }
76 |
77 | for (let key in options.players) {
78 | const playerConfig = options.players[key];
79 | if (playerConfig.pattern?.test(src)) {
80 | return key;
81 | }
82 | }
83 | // Fallback to html player.
84 | return 'html';
85 | }
86 |
87 | function getSrcParam(src, key) {
88 | const url = Array.isArray(src) ? src[0] : src;
89 | return url && new URLSearchParams(url.split('?')[1]).get(key);
90 | }
91 |
92 | function populate(tpl, obj) {
93 | return tpl.replace(
94 | /\{\{\s*([\w-]+)([=?|])?([^\s}]+?)?\s*\}\}/g,
95 | function (match, key, mod, fallback) {
96 | let val = obj[key];
97 | val = val != null ? val : fallback;
98 | if (val != null) {
99 | return val;
100 | }
101 | return '';
102 | }
103 | );
104 | }
105 |
106 | const loadScriptCache = {};
107 | async function loadScript(src, globalName) {
108 | if (!globalName) return import(src);
109 | if (loadScriptCache[src]) return loadScriptCache[src];
110 | if (self[globalName]) return self[globalName];
111 | return (loadScriptCache[src] = new Promise((resolve, reject) => {
112 | const script = document.createElement('script');
113 | script.defer = true;
114 | script.src = src;
115 | script.onload = () => resolve(self[globalName]);
116 | script.onerror = reject;
117 | document.head.append(script);
118 | }));
119 | }
120 |
121 | if (globalThis.customElements && !globalThis.customElements.get('player-x')) {
122 | globalThis.customElements.define('player-x', Playerx);
123 | }
124 |
125 | export { options, Playerx };
126 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # 
2 |
3 | [](https://www.npmjs.com/package/playerx)
4 | [](https://www.npmjs.com/package/playerx)
5 | [](https://www.jsdelivr.com/package/npm/playerx)
6 | [](https://bundlephobia.com/result?p=playerx)
7 |
8 | **npm**: `npm i playerx`
9 | **cdn**: https://cdn.jsdelivr.net/npm/playerx/+esm
10 |
11 | ## Features
12 |
13 | - 🏄♂️ Compatible [`HTMLMediaElement`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement) API
14 | - 🕺 Seamlessly integrates with [Media Chrome](https://github.com/muxinc/media-chrome)
15 |
16 |
17 | ## Usage ([Codesandbox](https://codesandbox.io/s/hello-playerx-22ku4))
18 |
19 | ```html
20 |
21 |