兼容移动端和网页的video 播放.M3U8格式视频

2017-06-30  本文已影响0人  羊羊羊0703

说明

1.原生video标签网页端只支持MP4、OGG、WebM的视频格式
2.直播的视频格式一般为.m3u8,如果不行对video进行格外处理,可以采用video.js插件
3.video.js须配合第三方的videojs库videojs-contrib-hls.js来播放.m3u8视频

4.工程相当简单,下面是截图 H5 video标签播放.m3u8格式视频
5.代码里个更新了资源的cdn

index.html


<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>videoJs</title>
        <link rel="stylesheet" type="text/css" href="css/video-js.css">
        <script src="js/video.min.js"></script>
                <!-- <link href="https://cdn.bootcss.com/video.js/6.3.3/video-js.min.css" rel="stylesheet">
                 <script src="https://cdn.bootcss.com/video.js/6.3.3/video.min.js"></script> -->
        <script src="https://unpkg.com/videojs-contrib-hls/dist/videojs-contrib-hls.js"></script>
    </head>
    <body>
        <section id="videoPlayer">
            <video id="example-video" width="600" height="300" class="video-js vjs-default-skin vjs-big-play-centered" poster="">
                <source src="http://rm03.wscdn.hls.xiaoka.tv/live/fczjp0Dc_J60VGMN/playlist.m3u8" type="application/x-mpegURL" id="target">
                                 <!-- <source src="movie.mp4" type="video/mp4"> -->
            </video>
        </section>
        <script type="text/javascript">
            var player = videojs('example-video', { "poster": "", "controls": "true" }, function() {
                this.on('play', function() {
                    console.log('正在播放');
                });
                //暂停--播放完毕后也会暂停
                this.on('pause', function() {
                    console.log("暂停中")
                });
                // 结束
                this.on('ended', function() {
                    console.log('结束');
                })

            });
        </script>
    </body>
</html>
上一篇 下一篇

猜你喜欢

热点阅读