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

＆＃13;

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

＆＃13;

如果您真的只想要音频，那么为什么不尝试<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添加了参数“playinline＆quot;”，允许视频文件在网页中播放，而无需打开完整的视频播放器。示例：https://jsfiddle.net/4gv1juua/1/

ios上的Html5音频：在浏览器中播放

2 个答案: