video.js 结合 flv.js播放flv视频

秒速五厘米 2022-04-14 03:09 603阅读 0赞

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <title>video</title>
        
        <link href="https://unpkg.com/video.js/dist/video-js.css" rel="stylesheet">
        <script src="https://unpkg.com/video.js/dist/video.min.js"></script>
        <script src="https://unpkg.com/flv.js/dist/flv.min.js"></script>
        <script src="https://unpkg.com/videojs-flvjs/dist/videojs-flvjs.min.js"></script>
    </head>
    
    <body>
        <div>
            <video id="videojs-flvjs-player" class="video-js vjs-default-skin vjs-big-play-centered"  width="1024" height="768"> </video>
        </div>
    </body>
    
    </html>
    <script>
    var flvUrl = "https://mister-ben.github.io/videojs-flvjs/bbb.flv";
    
    var player = videojs('videojs-flvjs-player', {
        techOrder: ['html5', 'flvjs'],
        flvjs: {
            mediaDataSource: {
                isLive: false,
                cors: true,
                withCredentials: false,
            },
        },
        sources: [{
            src: flvUrl,
            type: 'video/mp4'
        }],
        controls: true,
        preload: "none"
    }, function onPlayerReady() {
        console.log('player ready')
    
        player.on('error', (err) => {
            console.log('first source load fail')
    
            player.src({
                src: flvUrl,
                type: 'video/x-flv'
            });
    
            player.ready(function() {
                console.log('player ready')
                player.load();
                player.play();
            });
        })
    });
    </script>

发表评论取消回复

表情：

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

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

相关阅读

相关 vue 使用flv.js播放rtsp视频

vue 使用 flv.js 播放 rtsp 视频，你可以这样做： 1. 安装 flv.js： npminstall flv.js 1. 在 vue 项目中引入

小咪咪/ 2024年03月27日 18:12/ 0 赞/ 84 阅读

相关 vue3播放m3u8视频（videoJS）

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

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

相关 videojs多个视频一起播放暂停

需求多个视频要用同一个进度条控制播放暂停 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_tex

布满荆棘的人生/ 2022年11月03日 14:27/ 0 赞/ 415 阅读

相关 videoJS 播放 u3m8 格式视频Demo

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

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

相关 flex播放外部传入的flv地址视频

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/

深藏阁楼爱情的钟/ 2022年04月16日 07:15/ 0 赞/ 241 阅读

相关 video.js 结合 flv.js播放flv视频

<!DOCTYPE html> <html lang="en"> <head> <title>video</title>

秒速五厘米/ 2022年04月14日 03:09/ 0 赞/ 604 阅读

相关 videojs 播放.M3U8格式视频

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

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

相关 videoJs播放视频

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

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

相关 HTML网页实现flv视频播放

一、HTML代码如下： <div id="player"></div> 二、JavaScript代码如下： <script src="http://cdn

一时失言乱红尘/ 2021年10月24日 04:54/ 0 赞/ 690 阅读

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

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

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