The summary and records in the work are written for the first time. If there are problems, please point out that the records will be updated continuously

1, audio

**1. Listening and playing completed
**

Listening to the ended event is inaccurate. You can listen to the timeupdate event to judge that the playback is completed when the current playback progress currentTime is greater than or equal to the total duration duration;

var oAudio = document.getElementById('audio_player');
oAudio.addEventListener('timeupdate', function () {  
  // Listening and playing is completed, and the ended event is inaccurate  
  if (oAudio.currentTime >= oAudio.duration) {    
    _this.endFn();  
  }}, 
false);

2. Set the current audio playback time point

The direct setting of ios system is invalid. You can only listen to canplay (when it can be played) and then set currentTime;

if (isIos) {   
    oAudio.addEventListener('canplay', () => {       
        oAudio.currentTime = '';   
    }, { once: true })
} else {  // Android has no canplay event    
    oAudio.currentTime = '';
}

3. Audio management

android audio management is processed in the play monitor, and ios is processed in the canplay

if (isIos) {       
    oAudio.addEventListener('canplay', () => {       
         // ios audio management can be processed here
    }, { once: true })
} else {  // Android has no canplay event    
    oAudio.addEventListener('play', function () {        
        if (Util.isAndroid) {       
            // Dot code     
        }
    }, { once: true });
}

4. Set audio loading effect

ios can remove the loading effect when listening to the canplay event, and add the loading effect when listening to the loadstart and loaddata events;

if (isIos) { 
    oAudio.addEventListener('loadstart', () => {    
        if (isIos) {        
            _this.isLoadaudio = true;    
        }
    }, false)
    oAudio.addEventListener('loadeddata', () => {    
        if (isIos) {        
            _this.isLoadaudio = true;    
        }
    }, false)
   
    oAudio.addEventListener('canplay', () => {        
        _tihs.isLoadaudio = false;    
    }, { once: true }
)}

Android does not recommend adding the loading effect, because there is no accurate event listener that can be removed, otherwise it can only be added and cannot be removed (Android supports loadstart and loadaddata, not can play)

**5. Question about automatic playback: * * it needs to be triggered once to play;

**6. Continuous playback of multi audio audio: * * after listening to the current audio playback, ios continues to use the same audio player object and replace it with a new src playback address to realize the continuous playback effect;

<audio name="media" id="audio_player" preload>     
    <source :src="audio_url" type="audio/mpeg">
</audio>

var oAudio = document.getElementById('audio_player');
oAudio.src = self.pptData.ppt_list[index].audio_url;
oAudio.play();

7. Set the listening event to be executed only once, otherwise it will be executed multiple times

The third parameter of addEventListener is set to {once: true};

oAudio.addEventListener('play', function () {}, { once: true });

8. When listening to the background running of wechat browser, playback is prohibited

$(document).on('visibilitychange', () => {
    var isHidden = document.hidden;
    var oAudio = document.getElementById('audio_player');
    if (isHidden) { // Leave wechat browser and run in the background
        // Status changed to suspended
    } else {  // Enter the browser again
        if (oAudio.paused) { // Click pause when locking the screen
            // Status changed to suspended            
        } else { 
            // Change status to play
        }          
    }        
})

2, video

1. In X5 kernel, playing video tag does not automatically full screen

Just add WebKit playinline and X5 playinline to the video (focus on the role of X5 playinline)

<video class="qvideo" id="qvideo-wrap" playsinline webkit-playsinline x5-playsinline>
</video>

Note: x5 kernel - Android cannot add airplay = "allow" x5 video player fullscreen = "true" x-webkit airplay = "allow" (the playinline attribute is invalid after adding it)

2. On Android phones, the video level is the highest, and other pop-up windows will be blocked;

When pop-up window appears, the video height can be set to 0;

This article is transferred from https://juejin.cn/post/6844903839825395719 , in case of infringement, please contact to delete.