Fix audio track default display issue (#338)

* fix: default audio track is not displayed * feat:新增音轨组件的md说明 * chore: build assets for 1.1.3 --------- Co-authored-by: ji <[email protected]>
aliyunvideo · Nov 19, 2024 · d36757d · d36757d
1 parent 95c63b9
commit d36757d
Show file tree

Hide file tree

Showing 7 changed files with 83 additions and 4 deletions.
diff --git a/customComponents/demo/audio-track.html b/customComponents/demo/audio-track.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="x-ua-compatible" content="IE=edge" >
+  <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"/>
+  <title>Aliplayer Functions</title>
+  <link rel="stylesheet" href="https://g.alicdn.com/apsara-media-box/imp-web-player/2.27.1/skins/default/aliplayer-min.css" />
+  <script type="text/javascript" charset="utf-8" src="https://g.alicdn.com/apsara-media-box/imp-web-player/2.27.1/aliplayer-min.js"></script>
+  <script src="./aliplayercomponents-1.1.2.js"></script>
+</head>
+<body>
+<div id="player-con"></div>
+<script>
+  /* Make sure that the source video has multiple audio tracks */ 
+  var player = new Aliplayer({
+    id: "player-con",
+    source: "https://vod.h5video.vip/e7feffa0d46471edbfc00675a0ec0102/multiple.m3u8",
+    width: "100%",
+    height: "500px",
+    autoplay: true,
+    isLive: false,
+    controlBarVisibility: 'always',
+    components: [{
+      name: 'TrackComponent',
+      type: AliPlayerComponent.TrackComponent,
+      args: []
+    }]
+  }, function (player) {
+    console.log("The player is created");
+  });
+</script>
+</body>
+</html>
diff --git a/customComponents/dist/aliplayer-components/aliplayercomponents-1.1.3.min.js b/customComponents/dist/aliplayer-components/aliplayercomponents-1.1.3.min.js
diff --git a/customComponents/package-lock.json b/customComponents/package-lock.json
diff --git a/customComponents/package.json b/customComponents/package.json
@@ -1,6 +1,6 @@
 {
   "name": "custom-components",
-  "version": "1.1.2",
+  "version": "1.1.3",
   "description": "aliplayer's components",
   "main": "index.js",
   "scripts": {

diff --git a/customComponents/src/components/TrackComponent/README.md b/customComponents/src/components/TrackComponent/README.md
@@ -0,0 +1,19 @@
+## Playback speed component
+
+Other Languages: [简体中文](https://github.com/aliyunvideo/AliyunPlayer_Web/blob/master/customComponents/src/components/TrackComponent/README.zh_CN.md)
+
+The Audio Track Switching component is used to switch the audio track language of the video
+
+### Usage
+
+Reference this component and add the following code to the player configuration:
+
+```js
+components: [{
+  name: 'TrackComponent',
+  type: AliPlayerComponent.TrackComponent
+}]
+```
+
+**After the Audio Track speed component is added, the Audio Track speed setting in the player is hidden.**
+
diff --git a/customComponents/src/components/TrackComponent/README.zh_CN.md b/customComponents/src/components/TrackComponent/README.zh_CN.md
@@ -0,0 +1,18 @@
+## 倍速播放组件
+
+其他语言: [English](https://github.com/aliyunvideo/AliyunPlayer_Web/blob/master/customComponents/src/components/TrackComponent/README.md)
+
+音轨切换组件是用来切换视频的音轨语言
+
+### 使用方法
+
+引用当前组件, 播放器配置中添加如下代码:
+
+```js
+components: [{
+  name: 'TrackComponent',
+  type: AliPlayerComponent.TrackComponent
+}]
+```
+
+**添加音轨播放组件之后, 播放器的设置里面的音轨选项会被隐藏**
diff --git a/customComponents/src/components/TrackComponent/index.js b/customComponents/src/components/TrackComponent/index.js
@@ -34,10 +34,19 @@ export default class TrackComponent {
         return `<li data-def="${v.value}">${v.text}</li>`
       })
       this.html.querySelector('.track-list').innerHTML = `<li style="background:rgba(88,87,86,.5);color:#fff">音轨</li>`+lis_ele.join('')
+
+      // default track
+      let defaultTrack = player._audioTrackService._defaultTrack;
+      if (!defaultTrack) {
+        defaultTrack = this.trackList[0];
+      }
+      this.setCurrentTrack(defaultTrack.text, defaultTrack.value);
     })
     let currentTrackEle = this.html.querySelector('.current-track')
     let trackListEle = this.html.querySelector('.track-list')
 
+
+
     if (this.hasCreated == false && this.definition) {
       let li_target = trackListEle.querySelector(`li[data-def="${this.definition}"]`)
       li_target.className = 'current'
@@ -90,14 +99,12 @@ export default class TrackComponent {
     if (currentEle) {
       currentEle.className = ''
     }
-    // let li_target = trackListEle.querySelector(`li[data-def="${def}"]`)
     let lis = trackListEle.querySelectorAll('li')
     lis.forEach(element => {
       let text = element.innerText
       if(text === track){
         element.className = 'current'
       }
-      console.log(text)
     });
     if (lis) {
       lis.className = 'current'