iosのHtml5オーディオ：ブラウザで再生

Question

urbansunsets.com私はHTML5オーディオプレーヤーを持っています。 HTMLは次のとおりです。

<div class="col-lg-12 col-sm-12"> 
    <div id="radio_player"> 
     <div class="default-player"> 
      <video width="320" height="240" controls id="audio_player"> 
       <source src="http://stream.radio.co/sedf8bacc9/listen" type="audio/mpeg"> 
      </video> 
     </div> 

     <div id="audioplayer"> 
      <button id="pButton" class="pause"></button> 
      <div class="live">Live</div> 
      <div id="volume_control"> 
       <label id="rngVolume_label" for="rngVolume"> 
        <i class="fa fa-volume-up" aria-hidden="true"></i> 
       </label> 
       <input type="range" id="rngVolume" min="0" max="1" step="0.01" value="0.5"> 
      </div> 
      <div class="current-piece"> 
       <div class="now-playing">Now playing:</div> 
       <script src="https://public.radio.co/embed/sedf8bacc9/song.js"></script> 
      </div> 
     </div> 
    </div> 
</div> 

ではなく、ブラウザで遊んで、それはデバイスプレーヤーで開きます IPhone、以外のデスクトップ/ノートパソコンや携帯電話で希望、としてに動作します。何故ですか？ブラウザで遊ぶことができますか？何が欠けている？

ありがとうございました！

Answer 1

<div class="col-lg-12 col-sm-12"> 
 
    <div id="radio_player"> 
 
     <div class="default-player"> 
 
      <audio width="320" height="240" controls id="audio_player"> 
 
       <source src="http://stream.radio.co/sedf8bacc9/listen" type="audio/mpeg"> 
 
      </audio> 
 
     </div> 
 

 
     <div id="audioplayer"> 
 
      <button id="pButton" class="pause"></button> 
 
      <div class="live">Live</div> 
 
      <div id="volume_control"> 
 
       <label id="rngVolume_label" for="rngVolume"> 
 
        <i class="fa fa-volume-up" aria-hidden="true"></i> 
 
       </label> 
 
       <input type="range" id="rngVolume" min="0" max="1" step="0.01" value="0.5"> 
 
      </div> 
 
      <div class="current-piece"> 
 
       <div class="now-playing">Now playing:</div> 
 
       <script src="https://public.radio.co/embed/sedf8bacc9/song.js"></script> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>

あなたは本当にただのオーディオをしたい場合は、なぜあなたは<audio>代わりの<video>を試してみませんか？あなたがビデオタグを持っており、ラインでビデオを再生したいのに必要ないくつかの理由で、あなたがこれを行うことができれば

iPhone見えるの例では、オーディオへのビデオタグを変更することに加えてon codepen

Answer 2

を見ることができます

<video playsinline width="320" height="240" controls id="audio_player"> 
       <source src="http://stream.radio.co/sedf8bacc9/listen" type="audio/mpeg"> 
      </video> 

は、iOS 10では、Appleはビデオファイルが完全なビデオプレーヤーを開くことなく、ウェブページ内で再生することを可能にするパラメータ「playsinline」を追加しました。ここの例：https://jsfiddle.net/4gv1juua/1/