videojs 播放.M3U8格式视频

ゝ一世哀愁。 2022-03-08 19:30 1019阅读 0赞

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

<!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>
            <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">
                </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>

发表评论取消回复

表情：

评论列表（有 0 条评论，1019人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue3播放m3u8视频（videoJS）

安装 npm install video.js --save 组件内导入需要同时导入videoJS以及相关的CSS import videoj

小咪咪/ 2023年09月23日 19:25/ 0 赞/ 124 阅读

相关 videoJS 播放 u3m8 格式视频Demo

videoJS 播放 u3m8 格式视频Demo [VideoJs 官网地址][VideoJs] <!DOCTYPE html> <html lan

ゞ浴缸里的玫瑰/ 2022年10月16日 01:56/ 0 赞/ 284 阅读

相关怎么下载m3u8格式视频？Python爬取A站m3u8格式视频案例讲解

前言本文的文字及图片来源于网络,仅供学习、交流使用,不具有任何商业用途,如有问题请及时联系我们以作处理。本篇文章流程一. 数据来源分析 1. 确定需

桃扇骨/ 2022年09月07日 12:19/ 0 赞/ 277 阅读

相关视频直播技术之HLS 如何播放m3u8格式

引言在H5新标签video诞生之前，基本上所有直播都是用flash实现的。常用的流媒体协议主要有 HTTP 渐进下载和基于 RTSP/RTP 的实时流媒体协议，这两种协议

缺乏、安全感/ 2022年05月29日 06:43/ 0 赞/ 1057 阅读

相关【JS】video播放m3u8格式连续播放以及播放列表

解决m3u8播放失败的问题当不需要动态加载视频源的时候直接引入插件的地址即可 <div class="videoBox"> <video clas

清疚/ 2022年05月28日 06:12/ 0 赞/ 331 阅读

相关 videojs 播放.M3U8格式视频

1.原生video标签网页端只支持MP4、OGG、WebM的视频格式 2.直播的视频格式一般为.m3u8，如果不行对video进行格外处理，可以采用video.js插件

ゝ一世哀愁。/ 2022年03月08日 19:30/ 0 赞/ 1020 阅读

相关 videoJs播放视频

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>

约定不等于承诺〃/ 2022年02月14日 02:55/ 0 赞/ 426 阅读

相关 m3u8格式视频源列表

平时,需要测试m3u8格式视频的播放,会使用一些可用的播放源,整理在这里: const sourceList = [ { name: 'cct

朱雀/ 2022年01月30日 12:57/ 0 赞/ 463 阅读

相关 vue 播放m3u8视频( vue-videojs7)

1.安装插件 [Github地址][Github] npm install vue-videojs7 --save 2.封装组件VideoPlayer.vu

深碍√TFBOYSˉ_/ 2021年09月07日 10:34/ 0 赞/ 602 阅读

相关 vue中使用video标签播放MP4，m3u8格式视频

一，播放MP4视频 <video src="/video/suanfa.mp4" controls w

布满荆棘的人生/ 2021年07月25日 23:59/ 0 赞/ 3387 阅读