Html5 audio on ios: play it in browser

Question

On urbansunsets.com , I have an HTML5 audio player. The HTML is:

<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>

It works as desired on desktops/laptops and mobile phones, except IPhone, where instead of playing in the browser, it opens in the devices player. Why is that? Can it be made to play in browser? What is missing?

Thank you!

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> 

If you really just want audio, then why don't you try <audio> instead of <video> ?

an iPhone visible example can be seen on codepen

Answer 2

In addition to changing the video tags to audio, if for some reason you needed to have the video tags and want to play a video in line, you can do this

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

In iOS 10, Apple added the parameter 'playsinline', that allows video files to play within the webpage without opening up full video player. Example here: https://jsfiddle.net/4gv1juua/1/