1

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

我想为 iOS 和 Mac 上的视频显示 HTTP Live 流媒体版本，但为其他所有人显示标准 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>
4

1 回答 1

0

您可以添加多个<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>

这是我不久前偶然发现并添加书签的随机博客文章，其中更多地讨论了这一点。

于 2013-04-08T21:50:41.643 回答