简体   繁体   中英

Can't set currentTime in Chrome

For some reason in Chrome I can't set the currentTime property of the audio tag. I can alert the currentTime and it displays correctly but when I try to set the currentTime it reverts to zero. There is an event listener on a progress bar which triggers the alert shown below. It always displays as zero. In FireFox and IE the alert works just fine. What's the problem with Chrome?

$(document).ready(function(){document.getElementById('progressBar').addEventListener(
                                    'click',
                                    function(e) {

             document.getElementById("audio_id_1").currentTime = 10;
             alert(document.getElementById("audio_id_1").currentTime);
             ...
             ...

<audio id="audio_id_1" preload="metadata">
    <source src="test.mp3" type="audio/mp3" />
</audio>

My chrome can seek "local" audios and videos well, whose source urls start wich "blob:"

So I solved this in such the redundant way:

  • download the whole media (XMLHttpRequest);
  • get the blob url (URL.createObjectURL);
  • change the source url of the media


    function makeChromeSeekable(){ 
        var player = document.getElementById("thevideo")                                                                                                                                                                          
        var uReader = new XMLHttpRequest()                                                                                                                                                             
        uReader.open ('GET', player.src, true)                                                                                                                                                        
        uReader.responseType = 'blob'                                                                                                                                      
        uReader.onload = () => {                                                                                                                                                                           
            player.src = URL.createObjectURL(uReader.response)                                                                                                                                                        
        }                                                                                                                                                                                                                                                                                                                                                                                                
        uReader.send()                                                                                                                                                                                 
    }    
    makeChromeSeekable()

PS: The video files mignt be too large for downloading, but audio files should always be feasible.

PS. I used to believe that blob data has to be converted as data(File.getDataURL), but now using blob urls is ok seems more convenient.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM