mirror of
https://github.com/videojs/video.js.git
synced 2024-11-21 17:46:35 +02:00
docs: Remove Flash (#6994)
This commit is contained in:
mister-ben
GitHub
parent
a35a1217f0
commit
503141c75f
@ -35,7 +35,6 @@ So you want to help out? Great! There's a number of ways you can get involved.
|
||||
There's also other Video.js projects where you can help. (check the [video.js org](https://github.com/videojs) for an up-to-date list of projects)
|
||||
|
||||
* [Videojs.com](https://github.com/videojs/videojs.com)
|
||||
* [Video.js flash player](https://github.com/videojs/videojs-flash)
|
||||
* [HLS](https://github.com/videojs/videojs-contrib-hls)
|
||||
* [DASH](https://github.com/videojs/videojs-contrib-dash)
|
||||
* [Youtube Tech](https://github.com/videojs/videojs-youtube)
|
||||
@ -183,7 +182,6 @@ See [the following section](#running-a-local-web-server) for how to open the pag
|
||||
|
||||
This ties in nicely with the sandbox directory. You can always open the `sandbox/index.html` file directly but in some cases it may not work properly.
|
||||
|
||||
> Flash files (`.swf`) that are local and loaded into a locally accessed page (file:///) will NOT run.
|
||||
> To get around this you must use a local web server.
|
||||
|
||||
To run the local webserver:
|
||||
|
||||
@ -9,7 +9,7 @@
|
||||
|
||||
[![NPM][npm-icon]][npm-link]
|
||||
|
||||
> Video.js is a web video player built from the ground up for an HTML5 world. It supports HTML5 and Flash video, as well as YouTube and Vimeo (through [plugins][plugins]). It supports video playback on desktops and mobile devices. This project was started mid 2010, and the player is now used on over ~~50,000~~ ~~100,000~~ ~~200,000~~ [400,000 websites][builtwith].
|
||||
> Video.js is a web video player built from the ground up for an HTML5 world. It supports HTML5 video and Media Source Extensions, as well as other playback techs like YouTube and Vimeo (through [plugins][plugins]). It supports video playback on desktops and mobile devices. This project was started mid 2010, and the player is now used on over ~~50,000~~ ~~100,000~~ ~~200,000~~ ~~400,000~~ [600,000 websites][builtwith].
|
||||
|
||||
## Table of Contents
|
||||
|
||||
|
||||
@ -1,15 +1,10 @@
|
||||
const path = require('path');
|
||||
const fs = require('fs');
|
||||
const sh = require('shelljs');
|
||||
const pkg = require('../package.json');
|
||||
|
||||
const dest = path.join(__dirname, '..', 'docs', 'api');
|
||||
const vjsFlash = path.join(__dirname, '..', 'node_modules', 'videojs-flash');
|
||||
const vjsSwf = path.join('node_modules', 'videojs-swf');
|
||||
const distDest = path.join(dest, 'dist');
|
||||
const exampleDest = path.join(dest, 'test-example');
|
||||
const vjsFlashDest = path.join(dest, vjsFlash, 'dist');
|
||||
const swfDest = path.join(dest, vjsFlash, vjsSwf, 'dist');
|
||||
|
||||
const cleanupExample = function() {
|
||||
sh.rm('-rf', distDest);
|
||||
@ -23,24 +18,13 @@ const generateExample = function({skipBuild} = {}) {
|
||||
sh.exec('npm run build');
|
||||
}
|
||||
|
||||
// make sure that the example, flash, and swf dests are available
|
||||
// make sure that the example dest is available
|
||||
sh.mkdir('-p', exampleDest);
|
||||
sh.mkdir('-p', vjsFlashDest);
|
||||
sh.mkdir('-p', swfDest);
|
||||
|
||||
// copy the `dist` dir
|
||||
sh.cp('-R', 'dist', path.join(dest, 'dist'));
|
||||
sh.rm(path.join(dest, 'dist', `video-js-${pkg.version}.zip`));
|
||||
|
||||
// copy videojs-flash
|
||||
sh.cp(path.join(vjsFlash, 'dist', 'videojs-flash.js'), vjsFlashDest);
|
||||
// copy videojs-swf
|
||||
if (fs.existsSync(path.join(vjsFlash, vjsSwf, 'dist', 'video-js.swf'))) {
|
||||
sh.cp(path.join(vjsFlash, vjsSwf, 'dist', 'video-js.swf'), swfDest);
|
||||
} else {
|
||||
sh.cp(path.join(vjsSwf, 'dist', 'video-js.swf'), swfDest);
|
||||
}
|
||||
|
||||
const filepaths = sh.find(path.join(__dirname, '..', 'sandbox', '**', '*.*'))
|
||||
.filter((filepath) => path.extname(filepath) === '.example');
|
||||
|
||||
|
||||
@ -1,11 +1,10 @@
|
||||
{
|
||||
"name": "videojs/video.js",
|
||||
"description": "An HTML5 and Flash video player with a common API and skin for both.",
|
||||
"description": "An HTML5 video player.",
|
||||
"type": "library",
|
||||
"keywords": [
|
||||
"videojs",
|
||||
"html5",
|
||||
"flash",
|
||||
"video",
|
||||
"player"
|
||||
],
|
||||
|
||||
@ -156,7 +156,7 @@ The elevator begins to drop down another shaft, coming to rest as it slams into
|
||||
|
||||
39
|
||||
00:06:26.500 --> 00:06:28.000
|
||||
A camera flashes.
|
||||
A camera briefly illumiates.
|
||||
|
||||
40
|
||||
00:06:28.010 --> 00:06:34.000
|
||||
|
||||
@ -47,7 +47,7 @@
|
||||
Video.js is an extendable framework/library around the native video element. It does the following:
|
||||
|
||||
* Offers a plugin API so that different types of video can be handed to the native
|
||||
video element (e.g. [HLS][hls], [Flash][flash], HTML5 video, etc).
|
||||
video element (e.g. [HLS][hls], HTML5 video, etc).
|
||||
* Unifies the native video API across browsers (polyfilling support for features
|
||||
if necessary)
|
||||
* Offers an extendable and themable UI
|
||||
@ -161,16 +161,7 @@ on using that option.
|
||||
|
||||
## Q: How can I play RTMP video in Video.js?
|
||||
|
||||
RTMP requires Flash to play back. You'll need both a browser that supports Flash and the Flash tech.
|
||||
|
||||
In Video.js version 6, the Flash tech is not included by default and is available as a separate [videojs-flash package][flash]. In previous versions it was builtin to Video.js.
|
||||
|
||||
The RTMP source should be set with an appropriate type -- `rtmp/mp4` or `rtmp/flv`.
|
||||
Be aware of that Video.js splits the connection url and stream name with the `&` character, for example: `rtmp://example.com/live&foo` or `rtmp://example.com/fms&mp4:path/to/file.mp4`.
|
||||
|
||||
If the server requires query parameters for authentication, these should be added to the connection part URL, for example `rtmp://example.com/live?token=1234&foo`.
|
||||
|
||||
Bear in mind that mobile browsers do not support Flash, and modern desktop browsers make it increasingly difficult to use Flash or disable it by default for your end users. Consider moving to a modern format such as HLS or DASH.
|
||||
It is no longer possible to play RTMP as it requires Flash, and [Flash has reached end of life][flash-eol]. No browser supports it.
|
||||
|
||||
## Q: How can I hide the links to my video/subtitles/audio/tracks?
|
||||
|
||||
@ -221,7 +212,6 @@ See the [Video.js GitHub wiki][skins-list].
|
||||
## Q: Does Video.js work as an audio only player?
|
||||
|
||||
Yes! It can be used to play audio only files in a `<video>` or `<audio>` tag.
|
||||
Note that audio-only sources do not work with the Flash playback tech.
|
||||
|
||||
## Q: Does Video.js support audio tracks?
|
||||
|
||||
@ -253,8 +243,7 @@ Like HLS, DASH streams require [CORS headers][cors].
|
||||
|
||||
## Q: Does Video.js support live video?
|
||||
|
||||
Yes! Common formats for live are HLS or historically RTMP.
|
||||
HLS is supported via [videojs-http-streaming][hls] and RTMP via [videojs-flash][flash].
|
||||
Yes! Common formats for live are HLS or DASH. In the past RTMP was commonly used for live, but it is no longer possible to play in any browser.
|
||||
|
||||
## Q: Can Video.js play YouTube videos?
|
||||
|
||||
@ -302,7 +291,7 @@ Yes! See [ReactJS integration example][react-guide].
|
||||
|
||||
[eme]: https://github.com/videojs/videojs-contrib-eme
|
||||
|
||||
[flash]: https://github.com/videojs/videojs-flash
|
||||
[flash-eol]: https://www.adobe.com/products/flashplayer/end-of-life.html
|
||||
|
||||
[generator]: https://github.com/videojs/generator-videojs-plugin
|
||||
|
||||
|
||||
@ -51,8 +51,6 @@
|
||||
* [${componentName}](#componentname)
|
||||
* [Tech Options](#tech-options)
|
||||
* [${techName}](#techname)
|
||||
* [flash](#flash)
|
||||
* [swf](#swf)
|
||||
* [html5](#html5)
|
||||
* [nativeControlsForTouch](#nativecontrolsfortouch-1)
|
||||
* [nativeAudioTracks](#nativeaudiotracks)
|
||||
@ -560,27 +558,7 @@ videojs('my-player', {
|
||||
|
||||
> Type: `Object`
|
||||
|
||||
Video.js playback technologies (i.e. "techs") can be given custom options as part of the options passed to the `videojs` function. They should be passed under the _lower-case variant of the tech name_ (e.g. `"flash"` or `"html5"`).
|
||||
|
||||
### `flash`
|
||||
|
||||
#### `swf`
|
||||
|
||||
Specifies where the Video.js SWF file is located for the `Flash` tech:
|
||||
|
||||
```js
|
||||
videojs('my-player', {
|
||||
flash: {
|
||||
swf: '//path/to/videojs.swf'
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
However, changing the global defaults is generally more appropriate:
|
||||
|
||||
```js
|
||||
videojs.options.flash.swf = '//path/to/videojs.swf'
|
||||
```
|
||||
Video.js playback technologies (i.e. "techs") can be given custom options as part of the options passed to the `videojs` function. They should be passed under the _lower-case variant of the tech name_ (e.g. `"html5"`).
|
||||
|
||||
### `html5`
|
||||
|
||||
|
||||
@ -77,7 +77,7 @@ Suggests that a player or component was removed from the DOM without using `disp
|
||||
|
||||
## Showing and Hiding a Player
|
||||
|
||||
It is not recommended that you attempt to toggle the visibility or display of a Video.js player. Doing so can be particularly problematic when it comes to the Flash tech. Instead, players should be created and [disposed](#removing-players) as needed.
|
||||
It is not recommended that you attempt to toggle the visibility or display of a Video.js player. Instead, players should be created and [disposed](#removing-players) as needed.
|
||||
|
||||
This is relevant to use cases such as displaying a player in a modal/overlay. Rather than keeping a hidden Video.js player in a DOM element, it's recommended that you create the player when the modal opens and dispose it when the modal closes.
|
||||
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
# Playback Technology ("Tech")
|
||||
|
||||
Playback Technology refers to the specific browser or plugin technology used to play the video or audio. When using HTML5, the playback technology is the video or audio element. When using Flash from [videojs-flash][flash], the playback technology is the video-js.swf Flash object. When using the [videojs-youtube][youtube] tech, the playback technology is the You Tube player. The tech also includes an API wrapper to translate between the Video.js controls and API to the specific playback technology used.
|
||||
Playback Technology refers to the specific browser or plugin technology used to play the video or audio. When using HTML5, the playback technology is the video or audio element. When using the [videojs-youtube][youtube] tech, the playback technology is the YouTube player. The tech also includes an API wrapper to translate between the Video.js controls and API to the specific playback technology used.
|
||||
|
||||
Essentially we're using html5 and plugins only as video decoders, and using HTML and JavaScript to create a consistent API and skinning experience across all of them.
|
||||
|
||||
In addition to techs there are source handlers. Source handlers add the capability to play additional source types to techs. For example, the [videojs-contrib-hls][hls] source handler enables the HTML5 and Flash techs to play HLS.
|
||||
In addition to techs there are source handlers. Source handlers add the capability to play additional source types to techs. For example, the [http-streaming][http-streaming] source handler (included with Video.js 7+ by default) enables the HTML5 tech to play HLS and DASH.
|
||||
|
||||
## Building an API Wrapper
|
||||
|
||||
@ -46,14 +46,14 @@ When additional techs are added they are automatically added to the `techOrder`.
|
||||
### Tag Method:
|
||||
|
||||
```html
|
||||
<video data-setup='{"techOrder": ["html5", "flash", "other supported tech"]}'>
|
||||
<video data-setup='{"techOrder": ["html5", "other supported tech"]}'>
|
||||
```
|
||||
|
||||
### Object Method:
|
||||
|
||||
```js
|
||||
videojs("videoID", {
|
||||
techOrder: ["html5", "flash", "other supported tech"]
|
||||
techOrder: ["html5", "other supported tech"]
|
||||
});
|
||||
```
|
||||
|
||||
@ -75,6 +75,8 @@ Techs can check if they have this capability by checking the `canOverridePoster`
|
||||
|
||||
When Video.js is given an array of sources, which to use is determined by finding the first supported source / tech combination. Each tech will be queried in the order specified in `techOrder` whether it can play the first source. The first match wins. If no tech can play the first source, then the next will be tested. It's important to set the `type` of each source correctly for this test to be accurate.
|
||||
|
||||
> These example use the obsolete [Flash tech][flash-eol], for illustration of tech ordering with techs which have a greater degree of overlap in sources they can play
|
||||
|
||||
For example, given the following video element, assuming the [videojs-flash][flash] tech and [videojs-contrib-hls][hls] source handler are available:
|
||||
|
||||
```html
|
||||
@ -121,38 +123,14 @@ This time, we have videojs-flash but not videojs-contrib-hls:
|
||||
|
||||
## Flash Technology
|
||||
|
||||
The Flash playback tech was previously included in Video.js core and was included in the default `techOrder`. As of version 6, the Flash tech was moved to a separate [videojs-flash plugin][flash] which you would need to include if you still need to use Flash.
|
||||
Flash is no longer supported as it has reached [flash-eol][end of life]
|
||||
|
||||
It's increasingly likely that end users don't have Flash or their browser has either disabled it or puts a click-to-play or other barrier to using it, so it's strongly recommended to use an alternative such as HLS.
|
||||
|
||||
### Enabling RTMP Streaming Playback
|
||||
|
||||
In order to force the Flash tech to choose streaming playback, you need to provide a valid streaming source **before other valid Flash video sources**. This is necessary because of the source selection algorithm, where playback tech chooses the first possible source object with a valid type. Valid streaming `type` values include `rtmp/mp4` and `rtmp/flv`. The streaming `src` value requires valid connection and stream strings, separated by an `&`. An example of supplying a streaming source through your HTML markup might look like:
|
||||
|
||||
```html
|
||||
<source src="rtmp://your.streaming.provider.net/cfx/st/&mp4:path/to/video.mp4" type="rtmp/mp4">
|
||||
<source src="http://your.static.provider.net/path/to/video.mp4" type="video/mp4">
|
||||
<source src="http://your.static.provider.net/path/to/video.webm" type="video/webm">
|
||||
```
|
||||
|
||||
You may optionally use the last `/` as the separator between connection and stream strings, for example:
|
||||
|
||||
```html
|
||||
<source src="rtmp://your.streaming.provider.net/cfx/st/mp4:video.mp4" type="rtmp/mp4">
|
||||
```
|
||||
|
||||
All four RTMP protocols are valid in the `src` (RTMP, RTMPT, RTMPE, and RTMPS).
|
||||
|
||||
#### A note on sandboxing and security
|
||||
|
||||
In some environments, such as Electron and NW.js apps, stricter policies are enforced, and `.swf` files won’t be able to communicate with the outside world out of the box. To stream media, you have to add them to a special manifest of trusted files. [nw-flash-trust](https://github.com/szwacz/nw-flash-trust) makes this job easy.
|
||||
|
||||
Browsers also prevent the Flash tech from working when you load a page from the filesystem (with the `file:` protocol) and also in sandboxed iframes.
|
||||
|
||||
[flash]: https://github.com/videojs/videojs-flash
|
||||
[flash-eol]: https://www.adobe.com/products/flashplayer/end-of-life.html
|
||||
|
||||
[hls]: https://github.com/videojs/videojs-contrib-hls
|
||||
|
||||
[http-streaming]: https://github.com/videojs/http-streaming
|
||||
|
||||
[mse]: https://en.wikipedia.org/wiki/Media_Source_Extensions
|
||||
|
||||
[youtube]: https://github.com/videojs/videojs-youtube
|
||||
|
||||
@ -163,7 +163,7 @@ metadataTrack.addEventListener('cuechange', function() {
|
||||
|
||||
## Emulated Text Tracks
|
||||
|
||||
By default, Video.js will use native text tracks and fall back to emulated text tracks if the native functionality is broken, incomplete, or non-existent. The Flash tech will always use the emulated text track functionality.
|
||||
By default, Video.js will use native text tracks and fall back to emulated text tracks if the native functionality is broken, incomplete, or non-existent.
|
||||
|
||||
The Video.js API and TextTrack objects were modeled after the W3C specification. Video.js uses [Mozilla's vtt.js](https://github.com/mozilla/vtt.js) library to parse and display emulated text tracks.
|
||||
|
||||
|
||||
@ -32,7 +32,7 @@ You can supply an array of alternate sources. [webm][can-webm] and/or [ogv][can-
|
||||
Video.js 7+ supports HLS and MPEG-DASH as standard as it includes [http-streaming][http-streaming], which uses [Media Source Extensions][can-mse] to play these formats in modern browsers.
|
||||
If choosing a single format, HLS is more convenient as iOS and some Android browsers which do not support MSE do have native HLS support.
|
||||
|
||||
HLS is also possible with Flash on IE 11 on Windows 7, which does not support MSE, if you add the [flashls source handler][flashls].
|
||||
HLS is not possible on IE 11 on Windows 7, which does not support MSE. It was possible to play HLS on this browser with Flash.
|
||||
|
||||
For older Video.js versions, [http-streaming][http-streaming] or its predecessors [videojs-contrib-hls][hls] and [videojs-contrib-dash][dash] add similar support, but for best results use the latest Video.js.
|
||||
|
||||
@ -50,10 +50,7 @@ For older Video.js versions, [http-streaming][http-streaming] or its predecessor
|
||||
|
||||
### If you are using Flash videos:
|
||||
|
||||
* Consider using a different format. Some browsers do not support Flash and some users won't install it. Where it is installed, browsers make it increasingly difficult to use, e.g. requiring users to opt-in to run FLash on each site.
|
||||
* Make sure to add the [Flash tech][flash]. It was included by default in Video.js 5 and earlier.
|
||||
* Flash media formats include RTMP streams and FLV format media.
|
||||
* SWF is not a media format.
|
||||
* [Flash has reached end of life][flash-eol] and is no longer supported in browsers.
|
||||
|
||||
## Problems when hosting media
|
||||
|
||||
@ -104,10 +101,6 @@ To fix this issue please make sure that all event listeners are cleaned up on di
|
||||
|
||||
[youtube]: https://github.com/videojs/videojs-youtube
|
||||
|
||||
[flash]: https://github.com/videojs/videojs-flash
|
||||
|
||||
[flashls]: https://github.com/brightcove/videojs-flashls-source-handler
|
||||
|
||||
[media-types]: https://www.iana.org/assignments/media-types/media-types.xhtml#video
|
||||
|
||||
[cors]: https://enable-cors.org/
|
||||
@ -119,3 +112,5 @@ To fix this issue please make sure that all event listeners are cleaned up on di
|
||||
[can-ogv]: https://caniuse.com/#feat=ogv
|
||||
|
||||
[can-mse]: https://caniuse.com/#feat=mediasource
|
||||
|
||||
[flash-eol]: https://www.adobe.com/products/flashplayer/end-of-life.html
|
||||
|
||||
@ -71,7 +71,7 @@ Video.js is built around a collection of components. These are the building bloc
|
||||
|
||||
#### [Tech](/docs/guides/tech.md)
|
||||
|
||||
A "tech" is the shorthand we're using to describe any video playback technology - be it HTML5 video, Flash, . Basically anything that has a unique API to audio or video. Additional playback technologies can be added relatively easily.
|
||||
A "tech" is the shorthand we're using to describe any video playback technology - be it HTML5 video or a YouTube player. Basically anything that has a unique API to audio or video. Additional playback technologies can be added relatively easily.
|
||||
|
||||
#### [Languages](/docs/guides/languages.md)
|
||||
|
||||
|
||||
@ -14,7 +14,6 @@
|
||||
<li><a href="sandbox/middleware-play.html">Middleware Play Demo</a></li>
|
||||
<li><a href="sandbox/icons.html">Icons Demo</a></li>
|
||||
<li><a href="sandbox/focus-visible.html">Focus Visible Demo</a></li>
|
||||
<li><a href="sandbox/flash.html">Flash Demo</a></li>
|
||||
<li><a href="sandbox/embeds.html">Embeds Demo</a></li>
|
||||
<li><a href="sandbox/descriptions.html">Descriptions Demo</a></li>
|
||||
<li><a href="sandbox/combined-tracks.html">Combined Tracks Demo</a></li>
|
||||
|
||||
17
package-lock.json
generated
17
package-lock.json
generated
@ -14825,17 +14825,6 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"videojs-flash": {
|
||||
"version": "2.2.0",
|
||||
"resolved": "https://registry.npmjs.org/videojs-flash/-/videojs-flash-2.2.0.tgz",
|
||||
"integrity": "sha512-V+7MOQGx6t6y260GvCyNL3AlMKRy7H/BEtEqgOjeAqguBgeb+GUOmnczOyzXmHF4VyaoRS4ZDT3Qz2gF596j5w==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"global": "^4.3.2",
|
||||
"video.js": "^6 || ^7",
|
||||
"videojs-swf": "5.4.2"
|
||||
}
|
||||
},
|
||||
"videojs-font": {
|
||||
"version": "3.2.0",
|
||||
"resolved": "https://registry.npmjs.org/videojs-font/-/videojs-font-3.2.0.tgz",
|
||||
@ -14975,12 +14964,6 @@
|
||||
"tsmlb": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"videojs-swf": {
|
||||
"version": "5.4.2",
|
||||
"resolved": "https://registry.npmjs.org/videojs-swf/-/videojs-swf-5.4.2.tgz",
|
||||
"integrity": "sha512-FGg+Csioa8/A/EacvFefBdb9Z0rSiMlheHDunZnN3xXfUF43jvjawcWFQnZvrv1Cs1nE1LBrHyUZjF7j2mKOLw==",
|
||||
"dev": true
|
||||
},
|
||||
"videojs-vtt.js": {
|
||||
"version": "0.15.2",
|
||||
"resolved": "https://registry.npmjs.org/videojs-vtt.js/-/videojs-vtt.js-0.15.2.tgz",
|
||||
|
||||
@ -147,7 +147,6 @@
|
||||
"tui-jsdoc-template": "^1.2.2",
|
||||
"uglify-js": "^3.6.0",
|
||||
"unified": "^7.0.2",
|
||||
"videojs-flash": "^2.2.0",
|
||||
"videojs-generate-karma-config": "^7.0.0",
|
||||
"videojs-languages": "^2.0.0",
|
||||
"videojs-standard": "^8.0.3",
|
||||
|
||||
@ -7,12 +7,7 @@
|
||||
<!-- Load the source files -->
|
||||
<link href="../dist/video-js.css" rel="stylesheet" type="text/css">
|
||||
<script src="../dist/video.js"></script>
|
||||
<script src="../node_modules/videojs-flash/dist/videojs-flash.js"></script>
|
||||
|
||||
<!-- Set the location of the flash SWF -->
|
||||
<script>
|
||||
videojs.options.flash.swf = '../node_modules/videojs-flash/node_modules/videojs-swf/dist/video-js.swf';
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div style="background-color:#eee; border: 1px solid #777; padding: 10px; margin-bottom: 20px; font-size: .8em; line-height: 1.5em; font-family: Verdana, sans-serif;">
|
||||
|
||||
@ -8,11 +8,6 @@
|
||||
<link href="../dist/video-js.css" rel="stylesheet" type="text/css">
|
||||
<script src="../dist/video.js"></script>
|
||||
|
||||
<!-- Set the location of the flash SWF -->
|
||||
<script>
|
||||
videojs.options.flash.swf = '../node_modules/videojs-flash/node_modules/videojs-swf/dist/video-js.swf';
|
||||
</script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
@ -8,11 +8,6 @@
|
||||
<link href="../dist/video-js.css" rel="stylesheet" type="text/css">
|
||||
<script src="../dist/video.js"></script>
|
||||
|
||||
<!-- Set the location of the flash SWF -->
|
||||
<script>
|
||||
videojs.options.flash.swf = '../node_modules/videojs-flash/node_modules/videojs-swf/dist/video-js.swf';
|
||||
</script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
@ -8,17 +8,7 @@
|
||||
|
||||
<link href="../dist/video-js.css" rel="stylesheet" type="text/css">
|
||||
<script src="../dist/video.js"></script>
|
||||
|
||||
<script src='../node_modules/videojs-flash/dist/videojs-flash.js'></script>
|
||||
<script src="https://unpkg.com/videojs-contrib-hls@latest/dist/videojs-contrib-hls.js"></script>
|
||||
|
||||
<script src="../dist/lang/es.js"></script>
|
||||
|
||||
<!-- Set the location of the flash SWF -->
|
||||
<script>
|
||||
// videojs.options.flash.swf = 'https://vjs.zencdn.net/swf/5.3/video-js.swf';
|
||||
videojs.options.flash.swf = 'http://localhost:8000/video-js-swf/dist/video-js.swf';
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.source-el { background: #FF6961; }
|
||||
.source-js { background: #77DD77; }
|
||||
|
||||
@ -1,41 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Video.js Sandbox</title>
|
||||
|
||||
<!-- Load the source files -->
|
||||
<link href="../dist/video-js.css" rel="stylesheet" type="text/css">
|
||||
<script src="../dist/video.js"></script>
|
||||
<script src="../node_modules/videojs-flash/dist/videojs-flash.js"></script>
|
||||
|
||||
<!-- Set the location of the flash SWF -->
|
||||
<script>
|
||||
videojs.options.flash.swf = '../node_modules/videojs-flash/node_modules/videojs-swf/dist/video-js.swf';
|
||||
</script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div style="background-color:#eee; border: 1px solid #777; padding: 10px; margin-bottom: 20px; font-size: .8em; line-height: 1.5em; font-family: Verdana, sans-serif;">
|
||||
<p>You can use /sandbox/ for writing and testing your own code. Nothing in /sandbox/ will get checked into the repo, except files that end in .example (so don't edit or add those files). To get started run `npm start` and open the flash.html</p>
|
||||
<pre>npm start</pre>
|
||||
<pre>open http://localhost:9999/sandbox/flash.html</pre>
|
||||
</div>
|
||||
|
||||
<video id="vid1" class="video-js" controls preload="auto" width="640" height="264"
|
||||
poster="https://vjs.zencdn.net/v/oceans.png"
|
||||
data-setup=''>
|
||||
<source src="https://vjs.zencdn.net/v/oceans.mp4" type="video/mp4">
|
||||
<source src="https://vjs.zencdn.net/v/oceans.webm" type="video/webm">
|
||||
<source src="https://vjs.zencdn.net/v/oceans.ogv" type="video/ogg">
|
||||
<track kind="captions" src="../docs/examples/shared/example-captions.vtt" srclang="en" label="English">
|
||||
<p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p>
|
||||
</video>
|
||||
|
||||
<script>
|
||||
var vid = document.getElementById("vid1");
|
||||
var player = videojs(vid, {techOrder: ['flash', 'html5']});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -7,12 +7,7 @@
|
||||
<!-- Load the source files -->
|
||||
<link href="../dist/video-js.css" rel="stylesheet" type="text/css">
|
||||
<script src="../dist/video.js"></script>
|
||||
<script src="../node_modules/videojs-flash/dist/videojs-flash.js"></script>
|
||||
|
||||
<!-- Set the location of the flash SWF -->
|
||||
<script>
|
||||
videojs.options.flash.swf = '../node_modules/videojs-flash/node_modules/videojs-swf/dist/video-js.swf';
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div style="background-color:#eee; border: 1px solid #777; padding: 10px; margin-bottom: 20px; font-size: .8em; line-height: 1.5em; font-family: Verdana, sans-serif;">
|
||||
|
||||
@ -9,11 +9,6 @@
|
||||
<link href="../dist/video-js.css" rel="stylesheet" type="text/css">
|
||||
<script src="../dist/video.js"></script>
|
||||
|
||||
<!-- Set the location of the flash SWF -->
|
||||
<script>
|
||||
videojs.options.flash.swf = '../node_modules/videojs-flash/node_modules/videojs-swf/dist/video-js.swf';
|
||||
</script>
|
||||
|
||||
<!-- Add support for Spanish 'es' -->
|
||||
<script>
|
||||
videojs.addLanguage('es', {
|
||||
|
||||
@ -7,12 +7,6 @@
|
||||
<!-- Load the source files -->
|
||||
<link href="../dist/video-js.css" rel="stylesheet" type="text/css">
|
||||
<script src="../dist/video.js"></script>
|
||||
<script src="../node_modules/videojs-flash/dist/videojs-flash.js"></script>
|
||||
|
||||
<!-- Set the location of the flash SWF -->
|
||||
<script>
|
||||
videojs.options.flash.swf = '../node_modules/videojs-swf/dist/video-js.swf';
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.terminate-btn {
|
||||
|
||||
@ -8,11 +8,6 @@
|
||||
<link href="../dist/video-js.css" rel="stylesheet" type="text/css">
|
||||
<script src="../dist/video.js"></script>
|
||||
|
||||
<!-- Set the location of the flash SWF -->
|
||||
<script>
|
||||
videojs.options.flash.swf = '../node_modules/videojs-flash/node_modules/videojs-swf/dist/video-js.swf';
|
||||
</script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<p style="background-color:#eee; border: 1px solid #777; padding: 10px; font-size: .8em; line-height: 1.5em; font-family: Verdana, sans-serif;">This page shows you how to create, register and initialize a Video.js plugin.</p>
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
.video-js {
|
||||
// display:inline-block would be closer to the video el's display:inline
|
||||
// but it results in flash reloading when going into fullscreen [#2205]
|
||||
// TODO: Still needed?
|
||||
display: block;
|
||||
// Make video.js videos align top when next to video elements
|
||||
vertical-align: top;
|
||||
|
||||
@ -1303,6 +1303,7 @@ class Player extends Component {
|
||||
// Some browsers (Chrome & IE) don't trigger a click on a flash swf, but do
|
||||
// trigger mousedown/up.
|
||||
// http://stackoverflow.com/questions/1444562/javascript-onclick-event-over-flash-object
|
||||
// TODO: Is this needed for any techs other than Flash?
|
||||
// Any touch events are set to block the mousedown event from happening
|
||||
this.on(this.tech_, 'mouseup', this.handleTechClick_);
|
||||
this.on(this.tech_, 'dblclick', this.handleTechDoubleClick_);
|
||||
@ -2266,6 +2267,7 @@ class Player extends Component {
|
||||
|
||||
// Flash likes to die and reload when you hide or reposition it.
|
||||
// In these cases the object methods go away and we get errors.
|
||||
// TODO: Is this needed for techs other than Flash?
|
||||
// When that happens we'll catch the errors and inform tech that it's not ready any more.
|
||||
try {
|
||||
return this.tech_[method]();
|
||||
@ -2503,7 +2505,7 @@ class Player extends Component {
|
||||
* in all but the rarest use cases an argument will NOT be passed to the method
|
||||
*
|
||||
* > **NOTE**: The video must have started loading before the duration can be
|
||||
* known, and in the case of Flash, may not be known until the video starts
|
||||
* known, and depending on preload behaviour may not be known until the video starts
|
||||
* playing.
|
||||
*
|
||||
* @fires Player#durationchange
|
||||
@ -2529,6 +2531,7 @@ class Player extends Component {
|
||||
|
||||
if (seconds !== this.cache_.duration) {
|
||||
// Cache the last set value for optimized scrubbing (esp. Flash)
|
||||
// TODO: Required for techs other than Flash?
|
||||
this.cache_.duration = seconds;
|
||||
|
||||
if (seconds === Infinity) {
|
||||
@ -2734,7 +2737,7 @@ class Player extends Component {
|
||||
|
||||
/**
|
||||
* Check if current tech can support native fullscreen
|
||||
* (e.g. with built in controls like iOS, so not our flash swf)
|
||||
* (e.g. with built in controls like iOS)
|
||||
*
|
||||
* @return {boolean}
|
||||
* if native fullscreen is supported
|
||||
@ -3799,7 +3802,7 @@ class Player extends Component {
|
||||
|
||||
/**
|
||||
* Toggle native controls on/off. Native controls are the controls built into
|
||||
* devices (e.g. default iPhone controls), Flash, or other techs
|
||||
* devices (e.g. default iPhone controls) or other techs
|
||||
* (e.g. Vimeo Controls)
|
||||
* **This should only be set by the current tech, because only the tech knows
|
||||
* if it can support native controls**
|
||||
@ -4893,7 +4896,6 @@ Player.prototype.options_ = {
|
||||
techOrder: Tech.defaultTechOrder_,
|
||||
|
||||
html5: {},
|
||||
flash: {},
|
||||
|
||||
// default inactivity timeout
|
||||
inactivityTimeout: 2000,
|
||||
|
||||
@ -53,7 +53,7 @@ class MediaLoader extends Component {
|
||||
}
|
||||
}
|
||||
} else {
|
||||
// Loop through playback technologies (HTML5, Flash) and check for support.
|
||||
// Loop through playback technologies (e.g. HTML5) and check for support.
|
||||
// Then load the best source.
|
||||
// A few assumptions here:
|
||||
// All playback technologies respect preload false.
|
||||
|
||||
@ -76,7 +76,7 @@ function createTrackHelper(self, kind, label, language, options = {}) {
|
||||
|
||||
/**
|
||||
* This is the base class for media playback technology controllers, such as
|
||||
* {@link Flash} and {@link HTML5}
|
||||
* {@link HTML5}
|
||||
*
|
||||
* @extends Component
|
||||
*/
|
||||
@ -115,12 +115,12 @@ class Tech extends Component {
|
||||
}
|
||||
});
|
||||
|
||||
// Manually track progress in cases where the browser/flash player doesn't report it.
|
||||
// Manually track progress in cases where the browser/tech doesn't report it.
|
||||
if (!this.featuresProgressEvents) {
|
||||
this.manualProgressOn();
|
||||
}
|
||||
|
||||
// Manually track timeupdates in cases where the browser/flash player doesn't report it.
|
||||
// Manually track timeupdates in cases where the browser/tech doesn't report it.
|
||||
if (!this.featuresTimeupdateEvents) {
|
||||
this.manualTimeUpdatesOn();
|
||||
}
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
// Fake a media playback tech controller so that player tests
|
||||
// can run without HTML5 or Flash, of which PhantomJS supports neither.
|
||||
// can run without HTML5 which PhantomJS does not support.
|
||||
import Tech from '../../../src/js/tech/tech.js';
|
||||
import {createTimeRanges} from '../../../src/js/utils/time-ranges.js';
|
||||
/**
|
||||
|
||||
Loading…
Reference in New Issue
Block a user