videojs 播放.M3U8格式视频

ゝ一世哀愁。 2022-03-08 19:30 1145阅读 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 条评论，1145人围观）

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

相关阅读

相关使用videojs播放rtmp和m3u8视频

方式一、可播rtmp和m3u8 rtmp <html> <head> <title>videojs 7.4.1 play rtmp vi...

╰+哭是因爲堅強的太久メ/ 2024年04月18日 22:13/ 0 赞/ 104 阅读

相关 vue3播放m3u8视频（videoJS）

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

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

相关最新版videoJS使用播放M3U8格式直播视频

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8

客官°小女子只卖身不卖艺/ 2023年07月18日 09:17/ 0 赞/ 27 阅读

相关 videoJS 播放 u3m8 格式视频Demo

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

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

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

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

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

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

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

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

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

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

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

相关 videojs 播放.M3U8格式视频

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

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

相关 m3u8格式视频源列表

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

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

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

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

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