native-player.js 7.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256
  1. /*
  2. * Copyright (C) 2016 Bilibili. All Rights Reserved.
  3. *
  4. * @author zheng qian <xqq@xqq.im>
  5. *
  6. * Licensed under the Apache License, Version 2.0 (the "License");
  7. * you may not use this file except in compliance with the License.
  8. * You may obtain a copy of the License at
  9. *
  10. * http://www.apache.org/licenses/LICENSE-2.0
  11. *
  12. * Unless required by applicable law or agreed to in writing, software
  13. * distributed under the License is distributed on an "AS IS" BASIS,
  14. * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  15. * See the License for the specific language governing permissions and
  16. * limitations under the License.
  17. */
  18. import EventEmitter from 'events';
  19. import PlayerEvents from './player-events.js';
  20. import {createDefaultConfig} from '../config.js';
  21. import {InvalidArgumentException, IllegalStateException} from '../utils/exception.js';
  22. // Player wrapper for browser's native player (HTMLVideoElement) without MediaSource src.
  23. class NativePlayer {
  24. constructor(mediaDataSource, config) {
  25. this.TAG = 'NativePlayer';
  26. this._type = 'NativePlayer';
  27. this._emitter = new EventEmitter();
  28. this._config = createDefaultConfig();
  29. if (typeof config === 'object') {
  30. Object.assign(this._config, config);
  31. }
  32. if (mediaDataSource.type.toLowerCase() === 'flv') {
  33. throw new InvalidArgumentException('NativePlayer does\'t support flv MediaDataSource input!');
  34. }
  35. if (mediaDataSource.hasOwnProperty('segments')) {
  36. throw new InvalidArgumentException(`NativePlayer(${mediaDataSource.type}) doesn't support multipart playback!`);
  37. }
  38. this.e = {
  39. onvLoadedMetadata: this._onvLoadedMetadata.bind(this)
  40. };
  41. this._pendingSeekTime = null;
  42. this._statisticsReporter = null;
  43. this._mediaDataSource = mediaDataSource;
  44. this._mediaElement = null;
  45. }
  46. destroy() {
  47. if (this._mediaElement) {
  48. this.unload();
  49. this.detachMediaElement();
  50. }
  51. this.e = null;
  52. this._mediaDataSource = null;
  53. this._emitter.removeAllListeners();
  54. this._emitter = null;
  55. }
  56. on(event, listener) {
  57. if (event === PlayerEvents.MEDIA_INFO) {
  58. if (this._mediaElement != null && this._mediaElement.readyState !== 0) { // HAVE_NOTHING
  59. Promise.resolve().then(() => {
  60. this._emitter.emit(PlayerEvents.MEDIA_INFO, this.mediaInfo);
  61. });
  62. }
  63. } else if (event === PlayerEvents.STATISTICS_INFO) {
  64. if (this._mediaElement != null && this._mediaElement.readyState !== 0) {
  65. Promise.resolve().then(() => {
  66. this._emitter.emit(PlayerEvents.STATISTICS_INFO, this.statisticsInfo);
  67. });
  68. }
  69. }
  70. this._emitter.addListener(event, listener);
  71. }
  72. off(event, listener) {
  73. this._emitter.removeListener(event, listener);
  74. }
  75. attachMediaElement(mediaElement) {
  76. this._mediaElement = mediaElement;
  77. mediaElement.addEventListener('loadedmetadata', this.e.onvLoadedMetadata);
  78. if (this._pendingSeekTime != null) {
  79. try {
  80. mediaElement.currentTime = this._pendingSeekTime;
  81. this._pendingSeekTime = null;
  82. } catch (e) {
  83. // IE11 may throw InvalidStateError if readyState === 0
  84. // Defer set currentTime operation after loadedmetadata
  85. }
  86. }
  87. }
  88. detachMediaElement() {
  89. if (this._mediaElement) {
  90. this._mediaElement.src = '';
  91. this._mediaElement.removeAttribute('src');
  92. this._mediaElement.removeEventListener('loadedmetadata', this.e.onvLoadedMetadata);
  93. this._mediaElement = null;
  94. }
  95. if (this._statisticsReporter != null) {
  96. window.clearInterval(this._statisticsReporter);
  97. this._statisticsReporter = null;
  98. }
  99. }
  100. load() {
  101. if (!this._mediaElement) {
  102. throw new IllegalStateException('HTMLMediaElement must be attached before load()!');
  103. }
  104. this._mediaElement.src = this._mediaDataSource.url;
  105. if (this._mediaElement.readyState > 0) {
  106. this._mediaElement.currentTime = 0;
  107. }
  108. this._mediaElement.preload = 'auto';
  109. this._mediaElement.load();
  110. this._statisticsReporter = window.setInterval(
  111. this._reportStatisticsInfo.bind(this),
  112. this._config.statisticsInfoReportInterval);
  113. }
  114. unload() {
  115. if (this._mediaElement) {
  116. this._mediaElement.src = '';
  117. this._mediaElement.removeAttribute('src');
  118. }
  119. if (this._statisticsReporter != null) {
  120. window.clearInterval(this._statisticsReporter);
  121. this._statisticsReporter = null;
  122. }
  123. }
  124. play() {
  125. return this._mediaElement.play();
  126. }
  127. pause() {
  128. this._mediaElement.pause();
  129. }
  130. get type() {
  131. return this._type;
  132. }
  133. get buffered() {
  134. return this._mediaElement.buffered;
  135. }
  136. get duration() {
  137. return this._mediaElement.duration;
  138. }
  139. get volume() {
  140. return this._mediaElement.volume;
  141. }
  142. set volume(value) {
  143. this._mediaElement.volume = value;
  144. }
  145. get muted() {
  146. return this._mediaElement.muted;
  147. }
  148. set muted(muted) {
  149. this._mediaElement.muted = muted;
  150. }
  151. get currentTime() {
  152. if (this._mediaElement) {
  153. return this._mediaElement.currentTime;
  154. }
  155. return 0;
  156. }
  157. set currentTime(seconds) {
  158. if (this._mediaElement) {
  159. this._mediaElement.currentTime = seconds;
  160. } else {
  161. this._pendingSeekTime = seconds;
  162. }
  163. }
  164. get mediaInfo() {
  165. let mediaPrefix = (this._mediaElement instanceof HTMLAudioElement) ? 'audio/' : 'video/';
  166. let info = {
  167. mimeType: mediaPrefix + this._mediaDataSource.type
  168. };
  169. if (this._mediaElement) {
  170. info.duration = Math.floor(this._mediaElement.duration * 1000);
  171. if (this._mediaElement instanceof HTMLVideoElement) {
  172. info.width = this._mediaElement.videoWidth;
  173. info.height = this._mediaElement.videoHeight;
  174. }
  175. }
  176. return info;
  177. }
  178. get statisticsInfo() {
  179. let info = {
  180. playerType: this._type,
  181. url: this._mediaDataSource.url
  182. };
  183. if (!(this._mediaElement instanceof HTMLVideoElement)) {
  184. return info;
  185. }
  186. let hasQualityInfo = true;
  187. let decoded = 0;
  188. let dropped = 0;
  189. if (this._mediaElement.getVideoPlaybackQuality) {
  190. let quality = this._mediaElement.getVideoPlaybackQuality();
  191. decoded = quality.totalVideoFrames;
  192. dropped = quality.droppedVideoFrames;
  193. } else if (this._mediaElement.webkitDecodedFrameCount != undefined) {
  194. decoded = this._mediaElement.webkitDecodedFrameCount;
  195. dropped = this._mediaElement.webkitDroppedFrameCount;
  196. } else {
  197. hasQualityInfo = false;
  198. }
  199. if (hasQualityInfo) {
  200. info.decodedFrames = decoded;
  201. info.droppedFrames = dropped;
  202. }
  203. return info;
  204. }
  205. _onvLoadedMetadata(e) {
  206. if (this._pendingSeekTime != null) {
  207. this._mediaElement.currentTime = this._pendingSeekTime;
  208. this._pendingSeekTime = null;
  209. }
  210. this._emitter.emit(PlayerEvents.MEDIA_INFO, this.mediaInfo);
  211. }
  212. _reportStatisticsInfo() {
  213. this._emitter.emit(PlayerEvents.STATISTICS_INFO, this.statisticsInfo);
  214. }
  215. }
  216. export default NativePlayer;