β Business Needs:
In the process of live broadcast, continuous pull stream is needed to play. In the case of sudden network interruption, the live broadcast push stream interruption will be interrupted. In this case, the player cannot play the stream because the player fails to pull the stream. When the live stream resumes, the player needs to automatically resume the pull stream to automatically resume the live stream. The comparison results are as follows:
- Aliplayer fails to play when the stream is interrupted. At this time, it can set the recovery pull attempt for the specified number of repeated pulls. When the number of attempts reaches, the player will report an error and the message is not obvious.
- When TcPlayerLite fails to push the stream, there will be a specified error prompt [different error prompt will be set according to different error codes], which is convenient for users to know the status of live broadcast. When the live broadcast fails, the video cover can be displayed on the playing interface, which is relatively beautiful.
- Aliplayer does not support suspension of live broadcast, while TCPlayer does [Because at that time, Android phones can support suspension of live broadcast when playing on the same layer. When the live broadcast is interrupted, mobile phones will keep trying to pull the stream until it plays normally]. Therefore, in order to achieve the same effect as mobile phone wechat terminal, this scheme is adopted.
- Aliplayer configures the live address as a fixed parameter [source]. There is no requirement for the live address. The parameters of tcPlayer to configure the attributes of live broadcast address are those affected by the live broadcast address [M3U8, FLV, etc.]. Multiple live broadcast addresses can be configured at the same time, which will be automatically switched between mobile and PC terminals (if the browser supports Flash, it will automatically match the live broadcast in FLV format).
π code configuration:
- Introduce the player’S CDN in the head tag;
- Create player container in the page, style custom;
- Example Initialize the live video player.
<! DOCTYPEhtml>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="Width = device - width, initial - scale = 1.0" />
<! -- TCPlayerLite init CDN -->
<script src="https://imgcache.qq.com/open/qcloud/video/vcplayer/TcPlayer-2.3.3.js"></script>
<! -- or -->
<script src="https://cloudcache.tencent-cloud.com/open/qcloud/video/vcplayer/TcPlayer-2.3.3.js"></script>
</head>
<body>
<div id="app">
<! Initialize the player -->
<div id="tc_palyer_lite" style="width:100%; height:auto;"></div>
</div>
</body>
</html>
Copy the codeπ Initializes the live player
- Set live streaming address and video player cover;
- Set H5 compatibility (wechat layer play Settings);
- Set the player error code and corresponding prompt information;
- Set reconnection timing for live broadcast failure.
export default {
name: "TcPlayer".data() {
return {
player: null.videoUrl: "https://myun-hw-s3.myun.tv/e54ypd59/5z4op6m0/l7b9r8g0/0eyv9aal_1559181924071539192_origin.m3u8" /* Live pull stream address */.poster: "" /* Video cover */
};
},
mounted() {
this.initPlayer();
},
methods: {
// Initialize the player
initPlayer() {
if (this.player) {
this.player.destroy();
this.player = null;
}
let options = {
m3u8: this.videoUrl /* Play address */.// mp4: "" /* Back to address */,
// poster: this. Poster /* video */,
live: false /* Whether to live */.autoplay: true.poster: { style: "cover".src: this.poster },
pausePosterEnabled: true /* Display the cover when paused defaults to true */.wording: {
1002: "We're going live. Please hold on.".2032: "Video request failed. Please check network.".2048: "Failed to request m3U8 file. Possible network error or cross domain problem"
},
controls: "system"./ / the default | | 'shows the default controls, none does not display the controls, the system of mobile terminal display system controls
x5_player: true.x5_type: "h5-page".x5_fullscreen: true.listener: function(msg) {
// Playback failed, reconnect
if (msg.type == "error") {
setTimeout(() = > {
this.player.load(); / / reconnection
}, 4000); }}};/ / initialization
this.player = new TcPlayer("tc_player_view", options); }}};Copy the codeπ±π Parameter list:
| parameter | type | The default value | Parameters that |
|---|---|---|---|
| m3u8 | String | There is no | Original painting M3U8 play URL. |
| m3u8_hd | String | There is no | Hd M3U8 play URL. |
| m3u8_sd | String | There is no | Sd M3U8 plays URL. |
| flv | String | There is no | Original painting FLV plays URL. |
| flv_hd | String | There is no | Hd FLV plays URL. |
| flv_sd | String | There is no | Sd FLV plays URL. |
| mp4 | String | There is no | Original painting MP4 Playback URL. |
| mp4_hd | String | There is no | Play URL in HD MP4. |
| mp4_sd | String | There is no | Play URL in SD MP4. |
| rtmp | String | There is no | Original RTMP play URL. Example:rtmp://xxxxxxxxxxxxxxx_ |
| rtmp_hd | String | There is no | Hd RTMP plays urls. Example:rtmp://xxxxxxxxxxxxxxxx_hd |
| rtmp_sd | String | There is no | Sd RTMP plays urls. Example:rtmp://xxxxxxxxxxxxxxxxx_sd |
| width | Number | There is no | Will choose, sets the player width in pixels. Example: 640 |
| height | Number | There is no | Will choose, sets the player height in pixels. Example: 480 |
| volume | Number | 0.5 | Set the initial volume, ranging from 0 to 1 [v2.2.0+]. Example: 0.6 |
| live | Boolean | false | Will choose, set whether the video is a live broadcast type, will decide whether to render the timeline and other controls, and distinguish the processing logic of point live. |
| autoplay | Boolean | false | Whether to play automatically. (Note: This option takes effect only for most PC platforms) |
| poster | String / Object | There is no | To preview the cover, you can pass in an image address or an object containing the image address SRC and display style. – default Center: 1:1 display. – Stretch over the player area, images may be distorted; – cover Preferentially covers the player area with horizontal proportional stretching. Some parts of the image may not be displayed in the area. Example:”xxxxxxxxx.jpg“Or {“style”: “cover”,” SRC “:xxxxxxx.jpg} [v2.3.0 +] |
| controls | String | “Default”, “system” | Default Displays default controls. None displays no controls. System Displays system controls on mobile devices. (Note: If you want to use the system in full screen mode on the mobile terminal, set this parameter to System. The default Fullscreen solution is to use Fullscreen API + pseudo-fullscreen,Online sample) |
| systemFullscreen | Boolean | false | After this function is enabled, in the browser environment that does not support Fullscreen API, try to use the webkitEnterFullScreen method provided by the browser to perform full-screen operation. If this function is supported, the system enters full-screen operation and the control is a system control. |
| flash | Boolean | true | Whether to use Flash to play videos preferentially. (Note: This parameter takes effect only for PC platforms[v2.2.0 +]) |
| flashUrl | String | There is no | You can set the FLASH SWF URL. (Note: This parameter takes effect only for PC platforms[v2.2.1 +]) |
| h5_flv | Boolean | false | Whether to enable flV. js to play FLV. When enabled, FLV will be played in flV.js in mSE-enabled browsers. However, not all MSE-enabled browsers can use flv.js, so the player will not be enabled by default, [v2.2.0+]. |
| x5_player | Boolean | false | Whether to enable FLV or HLS for TBS. When enabled, the player will be in TBS mode (such as Android wechat, QQ browser), directly assign the FLV or HLS playback address to<video>Play. |
| x5_type | String | There is no | Use the video attribute “x5-video-player-type” to enable the H5 player of the same layer. The supported value is as follows: H5-Page (this attribute is an experimental TBS kernel attribute and not supported by non-TBS kernels). Example: “the h5 – page” |
| x5_fullscreen | String | There is no | Use the video attribute “x5-video-player-fullscreen” to declare whether the video is played in the full-screen mode of TBS. The supported value: true (this attribute is an experimental TBS kernel attribute, and non-TBS kernels do not support this attribute). Example: “true” |
| x5_orientation | Number | There is no | Declare the orientation supported by TBS player through video attribute “X5-video-orientation”, optional values: 0 (landscape), 1 (Portraint portrait), 2: (landscape | portrait follow mobile phone automatically rotating). (This attribute is TBS kernel experimental attribute, non-TBS kernel does not support) [V2.2.0 +]. Example: 0 |
| wording | Object | There is no | Custom copywriting.The sample: {2032: ‘Video request failed, please check network ‘} |
| clarity | String | ‘od’ | Default playback clarity [v2.2.1+].The sample: clarity: ‘od’ |
| clarityLabel | Object | {od: ‘ultra hd ‘, HD:’ hd ‘, SD: ‘sd ‘} | Custom definition copy [V2.2.1 +].The sample: clarityLabel: {od: ‘Blue ‘, HD:’ hd ‘, SD: ‘sd ‘} |
| listener | Function | There is no | The event listens for the callback function, which passes in a JSON-formatted object. Example: function(MSG){// do event processing} |
| pausePosterEnabled | Boolean | true | Display the cover when paused [V2.3.0 +]. |
| preload | String | ‘auto’ | Configure the preload attribute for the video tag. The preload attribute takes effect only on some browsers [V2.3.0 +]. |
| hlsConfig | Object | There is no | HLS. Js Initial configuration item [v2.3.0+]. |
| flvConfig | Object | There is no | Flv.js initializes the configuration item [v2.3.1+]. |
π° Example method:
| methods | parameter | The return value | instructions | The sample |
|---|---|---|---|---|
| play() | There is no | There is no | Start playing the video. | player.play() |
| pause() | There is no | There is no | Pause the video. | player.pause() |
| togglePlay() | There is no | There is no | Switch the video playback status. | player.togglePlay() |
| mute(muted) | {Boolean} [Optional] | true,false {Boolean} | Switch the mute state. If no parameter is passed, whether the current mute state is returned. | player.mute(true) |
| volume(val) | {int} range: 0 to 1 [optional] | Range: 0 to 1 | Set the volume. If no parameter is passed, the current volume is returned. | Player. Volume (0.3) |
| playing() | There is no | true,false {Boolean} | Returns whether playing. | player.playing() |
| duration() | There is no | {int} | Get the video duration. (Note: The video duration can be obtained only after the Loadedmetadata event is triggered) | player.duration() |
| currentTime(time) | {int} [Optional] | {int} | Set the video playing time. If no parameter is passed, the current playing time is returned. (Note: This is only applicable to vod οΌ | player.currentTime() |
| fullscreen(enter) | {Boolean} [Optional] | true,false {Boolean} | When the Fullscreen API is invoked, the pseudo-fullscreen mode is used when the Fullscreen API is not supported. If no parameter is passed, whether the current value is Fullscreen is returned. (Note: The mobile terminal system does not provide API and cannot obtain the full screen status οΌ | player.fullscreen(true) |
| buffered() | There is no | 0 to 1 | Gets the percentage of video buffered data. (Note: This is only applicable to vod) | player.buffered() |
| destroy() | There is no | There is no | Destroy the player instance [v2.2.1+]. | player.destroy() |
| switchClarity() | {String} [for] | There is no | Switch resolution, pass “OD”, “HD”, “SD” [V2.2.1 +]. | player.switchClarity(‘od’) |
| load(url) | {String} [for] | There is no | Load a video using the video address. (Note: This method can only load video formats supported by the corresponding playback mode. Flash mode supports SWITCHING between RTMP, FLV, HLS and MP4, and H5 mode supports MP4, HLS and FLV (HLS and FLV depend on whether the browser supports them).[v2.2.2 +]) | player.load([http://xxx.mp4](http://xxx.mp4)) |
β Error code:
| Code | The clues | instructions |
|---|---|---|
| 1 | The network is incorrect. Please check whether the network configuration or playback link is correct. | H5 error. |
| 2 | The network is incorrect. Please check whether the network configuration or playback link is correct. | The video format cannot be decoded by the Web player. H5 error. |
| 3 | Video decoding error. | H5 error. |
| 4 | The current system does not support the video format. | H5 error. |
| 5 | The current system does not support the video format. | The player determines that the current browser does not support playing the incoming video. The MSE is not supported or the Flash plug-in is not enabled. |
| 10 | Do not use the player under the File protocol. Otherwise, videos cannot be played. | – |
| 11 | Use parameter error, please check the player call code. | – |
| 12 | Please fill in the video playing address. | – |
| 13 | The live broadcast is over. Please come back later. | RTMP triggering events during normal play (NetConnection. Connect. Closed).Flash error. |
| 1001 | The network is incorrect. Please check whether the network configuration or playback link is correct. | Network has broken (NetConnection. Connect. Closed).Flash error. |
| 1002 | Failed to get the video. Please check whether the play link is valid. | Failed to pull Play file (NetStream. Play. StreamNotFound), could be a server error or video file does not exist.Flash error. |
| 2032 | Failed to get the video. Please check whether the play link is valid. | Flash error. |
| 2048 | Unable to load video file, cross-domain access denied. | Failed to request the M3U8 file, possibly due to a network error or cross-domain problem.Flash error. |
π summary
- Since the outbreak, live streaming has become very popular. I have also done several projects related to live video. Also stepped on a lot of pits, leisure time, recall reflection, make notes to make a summary, the purpose is to facilitate the follow-up development, at the same time to share, but also facilitate to give a hint to peers.
- I have tried several video plug-ins before and after, and now I will analyze and compare the usage and actual demand:
- π± Aliplayer (Ali Cloud player) is produced by large manufacturers, with detailed documentation and many users:
- Compatible with mobile terminal and PC terminal, you can make corresponding adjustment and configuration according to the document;
- You can configure the desired functional buttons;
- Can be configured online, can be directly preview, good effect;
- The disadvantage is that the prompt message is not very friendly, and it is cumbersome to customize the error message.
- π§TcPlayer player (Tencent player) Tencent official out of the player, the document is relatively detailed without Aliplayer:
- Simple configuration, support mobile PC video on demand and live;
- Relatively speaking, the adaptive effect is not very good on the mobile terminal, but the error prompt can be customized.
- Compared with AliPlayer, when a live stream is interrupted, it can be automatically reconnected until the stream is pushed.
- Different error prompts can be configured according to different status codes, so that users can clearly understand the live broadcast status.
- In contrast to AliPlayer, live streams can be paused, but AliPlayer live streams cannot be paused.
- π xgPlayer (watermelon player) bytedance – watermelon video player, documentation configuration is also very detailed:
- TcPlayer, like Tencent’s, is also well documented;
- Can customize the development of plug-ins, can take screenshots;
- The disadvantage is that different plug-ins need to be loaded and configured when different formats of addresses are used in live streaming.
π watermelon player has recently been used in the background management system to preview video live broadcast and playback, and then simply make records.