如何爲通用瀏覽器提供內容？ （使用Useragent）

Question

因此，我有一些視頻發佈到我的博客 - 請注意，這是孩子的照片，並可能很快就會導致孩子昏迷。

我想要顯示適用於iOS的那些視頻的HTTP實時流版本& Mac，但是適用於其他人的標準MP4文件。所以，擁有邏輯能夠爲任何人提供Safari M3u8以及其他所有人的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我碰到一段時間前迷迷糊糊的書籤，大約這多一點的會談。