ios - How do I provide content for a general browser? (using the Useragent) -
so have videos post blog - aware, it's kid pictures, , put in in child induced coma quickly.
i display http live streaming version of video on ios & macs, standard mp4 file else. so, great have logic provide safari m3u8, , else mp4. thanks!
as stands now, have provide 2 different players (which looks bad)
<!-- 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>
you can add multiple <source>
elements, , browser go through list until finds source element supports:
<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>
here's random blog post stumbled across awhile ago , bookmarked talks bit more.
Comments
Post a Comment