如何为常规浏览器提供内容？ （使用Useragent）

Question

所以我发布了一些我发布到我博客上的视频 - 请注意，这是儿童照片，可能会很快引发儿童诱发的昏迷。

我想为iOS和iOS上的用户显示视频的HTTP直播流媒体版本。 Mac，但其他人的标准MP4文件。因此，有逻辑可以为任何人提供m3u8的Safari，以及mp4的其他所有人。谢谢！

现在，我必须提供2个不同的玩家（看起来很糟糕）

        <!-- Begin Video.js Responsive Wrapper -->
    <div style='max-width:800px;'>
        <div class='video-wrapper' style='padding-bottom:45.875%;'>

<!-- Begin Video.js -->
<video id="example_video_id_2142731582" class="video-js vjs-default-skin" width="800" height="367" poster="http://blog.thetroutmans.net/wp-content/uploads/2013/04/1stBikeRide/poster.png" controls preload="none" data-setup="{}">
    <source src="http://blog.thetroutmans.net/wp-content/uploads/2013/04/1stBikeRide/1stBikeRide.m3u8" type='video/mp4' />


</video>
<!-- End Video.js -->

        </div>
    </div>
    <!-- End Video.js Responsive Wrapper -->
    </p>

    <!-- Begin Video.js Responsive Wrapper -->
    <div style='max-width:800px;'>
        <div class='video-wrapper' style='padding-bottom:45.875%;'>

<!-- Begin Video.js -->
<video id="example_video_id_621346600" class="video-js vjs-default-skin" width="800" height="367" poster="http://blog.thetroutmans.net/wp-content/uploads/2013/04/1stBikeRide/poster.png" controls preload="none" data-setup="{}">
    <source src="http://blog.thetroutmans.net/wp-content/uploads/2013/04/1stBikeRide/First%20Bike%20Ride-Wi-Fi%20High.mp4" type='video/mp4' />


</video>
<!-- End Video.js -->

        </div>
    </div>
    <!-- End Video.js Responsive Wrapper -->
    </p>

Answer 1

您可以添加多个<source>元素，浏览器将遍历列表，直到找到它支持的源元素：

<video id="example_video_id_621346600" class="video-js vjs-default-skin" width="800" height="367" poster="http://blog.thetroutmans.net/wp-content/uploads/2013/04/1stBikeRide/poster.png" controls preload="none" data-setup="{}">
    <source src="http://blog.thetroutmans.net/wp-content/uploads/2013/04/1stBikeRide/First%20Bike%20Ride-Wi-Fi%20High.m3u8" type='application/x-mpegURL' />
    <source src="http://blog.thetroutmans.net/wp-content/uploads/2013/04/1stBikeRide/First%20Bike%20Ride-Wi-Fi%20High.mp4" type='video/mp4' />
</video>

这是一段random blog post，我偶然发现了一段时间，并为此谈了这个问题。