js实现的万能flv网页播放器代码

关于“js实现的万能flv网页播放器代码”的攻略,可以分为以下几个步骤:

1. 准备工作

在开始编写代码之前,我们需要准备以下三个必备元素:flv.js库、video.js库、以及我们要播放的flv文件。

  • flv.js:是一个轻量级的HTTP-FLV播放器库,可以用于浏览器内嵌播放Flv视频文件,它是基于浏览器原生的Media Source Extensions API开发的。
  • video.js:是一个广泛使用的开源HTML5视频播放框架,可以适配多种浏览器和设备。
  • flv视频文件:即我们要播放的Flv视频文件。可以从视频网站等地方下载获取。

2. 引入库文件

flv.js需要我们引入两个js文件:flv.min.jsvideojs-flvjs.min.js。在头部标签中分别引入这两个文件:

<head>
  <link href="//vjs.zencdn.net/7.6.6/video-js.min.css" rel="stylesheet">
  <script src="//vjs.zencdn.net/ie8/ie8-version/videojs-ie8.min.js"></script>
  <script src="//vjs.zencdn.net/7.6.6/video.min.js"></script>
  <script src="//cdn.jsdelivr.net/npm/flv.js@^1.4.1/dist/flv.min.js"></script>
  <script src="//cdn.jsdelivr.net/npm/videojs-flvjs@^1.5.0/dist/videojs-flvjs.min.js"></script>
</head>

3. 加载flv.js

在页面加载完成之后,我们需要使用flv.js的API创建一个flvPlayer对象,指定要播放的flv影片的URL:

var flvPlayer = flvjs.createPlayer({
    type: 'flv',
    url: 'http://www.example.com/demo.flv'
});

注:替换实际的flv地址即可使用。

4. 加载video.js

我们需要使用video.js创建一个播放器,并将其渲染到页面上,这样我们就可以像使用video标签一样使用它了:

var videoPlayer = videojs('videoPlayer');
videoPlayer.src({src: 'http://www.example.com/demo.flv', type: 'video/x-flv'});

注:videoPlayer是dom元素的ID。

5. 添加flv.js插件

接下来,我们需要将flv.js作为video.js的一个插件,以使它能够正常解码和播放flv视频。我们只需要在videojs的配置文件中添加flvjs插件即可:

var videoPlayer = videojs('videoPlayer',{
  plugins: {flvjs: {type: 'flv'}}
});

示例说明

示例1:最简单的flv视频播放器

<!DOCTYPE html>
<html>
<head>
    <title>flv视频播放器</title>
    <link href="//vjs.zencdn.net/7.6.6/video-js.min.css" rel="stylesheet">
    <script src="//vjs.zencdn.net/ie8/ie8-version/videojs-ie8.min.js"></script>
    <script src="//vjs.zencdn.net/7.6.6/video.min.js"></script>
    <script src="//cdn.jsdelivr.net/npm/flv.js@^1.4.1/dist/flv.min.js"></script>
  <script src="//cdn.jsdelivr.net/npm/videojs-flvjs@^1.5.0/dist/videojs-flvjs.min.js"></script>
</head>
<body>
    <video id="videoPlayer" class="video-js vjs-default-skin" controls preload="auto" width="640" height="264">
        <source src="http://www.example.com/demo.flv" type="video/x-flv">
    </video>

    <script type="text/javascript">
        var flvPlayer = flvjs.createPlayer({
      type: 'flv',
      url: 'http://www.example.com/demo.flv'
    });

        var videoPlayer = videojs('videoPlayer',{
          plugins: {flvjs: {type: 'flv'}}
        });

        videoPlayer.src({src: 'http://www.example.com/demo.flv', type: 'video/x-flv'});
    </script>
</body>
</html>

示例2:带弹幕和自定义控制工具栏的flv视频播放器

<!DOCTYPE html>
<html>
<head>
    <title>flv视频播放器</title>
    <link href="//vjs.zencdn.net/7.6.6/video-js.min.css" rel="stylesheet">
    <script src="//vjs.zencdn.net/ie8/ie8-version/videojs-ie8.min.js"></script>
    <script src="//vjs.zencdn.net/7.6.6/video.min.js"></script>
    <script src="//cdn.jsdelivr.net/npm/flv.js@^1.4.1/dist/flv.min.js"></script>
  <script src="//cdn.jsdelivr.net/npm/videojs-flvjs@^1.5.0/dist/videojs-flvjs.min.js"></script>
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
    <video id="videoPlayer" class="video-js vjs-default-skin" controls preload="auto" width="640" height="264">
        <source src="http://www.example.com/demo.flv" type="video/x-flv">
    </video>

    <script type="text/javascript">
        var flvPlayer = flvjs.createPlayer({
      type: 'flv',
      url: 'http://www.example.com/demo.flv'
    });

        var videoPlayer = videojs('videoPlayer',{
          plugins: {flvjs: {type: 'flv'}}
        });

        videoPlayer.src({src: 'http://www.example.com/demo.flv', type: 'video/x-flv'});

        videoPlayer.on('ready', function() {
            // 自定义控制工具栏的图标和颜色
            var controlBar = videoPlayer.controlBar;
            controlBar.playToggle.el().innerHTML = '<i class="iconfont">&#xe61c;</i>';
            controlBar.currentTimeDisplay.el().style.fontSize = '14px';
            controlBar.currentTimeDisplay.el().style.color = '#333';
            controlBar.durationDisplay.el().style.fontSize = '14px';
            controlBar.durationDisplay.el().style.color = '#333';
            controlBar.timeDivider.el().innerHTML = '&nbsp;/&nbsp;';
            controlBar.progressControl.seekBar.el().style.height = '3px';
            controlBar.progressControl.seekBar.el().style.backgroundColor = '#ccc';
            controlBar.progressControl.seekBar.handle.el().innerHTML = '<i class="iconfont" style="font-size: 26px;">&#xe601;</i>';
            controlBar.volumePanel.volumeBar.el().style.height = '3px';
            controlBar.volumePanel.volumeBar.el().style.backgroundColor = '#ccc';
            controlBar.volumePanel.volumeBar.handle.el().innerHTML = '<i class="iconfont" style="font-size: 18px;">&#xe609;</i>';

            // 弹幕
            $.getJSON('https://api.xiaomark.com/tools/bilibili-barrage.php?aid=89917480', function(result) {
                var data = result.data;

                data.forEach(function(d) {
                    var div = document.createElement('div');
                    div.innerHTML = d.content;
                    div.className = "danmaku-item";
                    div.style.color = d.color;
                    div.style.transform = 'translate(100%, 0)';
                    div.style.animation = 'scrollLeft 5s linear infinite';
                    div.style.fontSize = 'smaller';
                    div.style.whiteSpace = 'nowrap';
                    div.getElementById = d.time;
                    document.querySelector('.vjs-danmu').appendChild(div);
                });
            });
        });
    </script>

    <style type="text/css">
        .iconfont {
          font-family: 'iconfont' !important;
          font-size: 16px;
          font-style: normal;
          -webkit-font-smoothing: antialiased;
          -webkit-text-stroke-width: 0.2px;
          -moz-osx-font-smoothing: grayscale;
        }

        @keyframes scrollLeft {
          from {
            transform: none;
          }
          to {
            transform: translate(-100%, 0);
          }
        }

        .danmaku-item {
          font-size: 20px;
          position: absolute;
          will-change: auto;
          transform-origin: 0 100%;
          opacity: 0.8;
          z-index: 990;
        }
    </style>

</body>
</html>

以上就是“js实现的万能flv网页播放器代码”的完整攻略,望能帮到您!

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:js实现的万能flv网页播放器代码 - Python技术站

(0)
上一篇 2023年5月28日
下一篇 2023年5月28日

相关文章

  • 一文了解ES5和ES6的区别

    一文了解ES5和ES6的区别 Javascript是世界上最流行的编程语言之一,它一直在不断发展和更新。ES5和ES6是Javascript的两个主要版本,它们之间存在很多重要的区别。本文将详细讲解ES5和ES6的区别,以便更好地理解现代的Javascript编程。 1. 变量声明的关键字不同 在ES5中,使用var关键字声明变量。例如: var x = 1…

    JavaScript 2023年6月10日
    00
  • Ruby on Rails中MVC结构的数据传递解析

    Ruby on Rails是一个基于MVC模式的Web应用程序框架,MVC即Model-View-Controller,其中模型层(Model)处理数据、控制器层(Controller)处理业务逻辑和请求、视图层(View)处理用户交互和展示。 在Ruby on Rails开发中,数据传递与解析是一个非常重要的过程。该过程通常要结合MVC模式一起使用。下面是…

    JavaScript 2023年6月10日
    00
  • js 取时间差去掉周六周日实现代码

    要计算时间差并去掉周六周日,我们可以使用 JavaScript 内置的 Date 对象,它提供了许多方法来处理日期和时间。以下是实现这个功能的步骤: 获取开始时间和结束时间的 Date 对象。 我们可以使用 Date 对象的构造函数来创建具有指定日期和时间的日期对象。例如,我们可以这样创建一个代表 2021 年 1 月 1 日的 Date 对象:new Da…

    JavaScript 2023年5月27日
    00
  • 浅谈Javascript嵌套函数及闭包

    浅谈Javascript嵌套函数及闭包 Javascript中的嵌套函数和闭包是一些高级概念,但对于深入理解Javascript这门语言来说是必不可少的。在这篇文章中,我们将探讨Javascript中嵌套函数和闭包的概念、特点以及如何使用它们。 嵌套函数 嵌套函数,就是在一个函数体中定义另一个函数。在Javascript中,函数是一等公民,也就是说函数可以作…

    JavaScript 2023年6月10日
    00
  • JavaScript 实现鼠标拖动元素实例代码

    下面就给您详细讲解一下“JavaScript 实现鼠标拖动元素实例代码”的攻略。 什么是鼠标拖动元素 鼠标拖动元素是指利用鼠标对网页上的某个元素进行拖动操作,把元素从一个位置移到另一个位置。在前端开发中,鼠标拖动元素经常被用于实现拖拽排序、拖拽上传等功能。 实现鼠标拖动元素的基本步骤 实现鼠标拖动元素的基本步骤如下: 给需要拖动的元素添加鼠标按下的事件监听器…

    JavaScript 2023年6月10日
    00
  • js实现文字滚动的效果

    JS实现文字滚动的效果,通常可以通过CSS和JS两种方式来实现。下面将详细介绍一下这两种实现方式。 CSS实现文字滚动 1. 使用CSS动画实现文字滚动 可以通过CSS的@keyframes关键字加上animation属性来实现文字滚动的效果。具体步骤如下: 在CSS中创建一个动画实现文字滚动的效果。 @keyframes scroll { 0% { tra…

    JavaScript 2023年6月11日
    00
  • Javascript将图片的绝对路径转换为base64编码的方法

    将图片的绝对路径转换为base64编码的方法可以使用Javascript的Canvas对象来实现。具体过程如下: 步骤 1:创建一个Image对象 首先,我们需要创建一个Image对象,将想要转换成base64编码的图片作为其src属性的值。 const image = new Image(); image.src = ‘https://example.co…

    JavaScript 2023年5月19日
    00
  • 详解javascript void(0)

    标题:详解javascript void(0) 简介 void(0) 是一个JavaScript语言中的操作符,这个方式可以用来执行一段代码却不返回任何值。通常使用 void(0) 可以防止页面被重定向,即不会跳转到新的页面。 使用方法 常见的使用场景: 在 href 属性中使用 void(0): <a href="javascript:vo…

    JavaScript 2023年5月28日
    00
合作推广
合作推广
分享本页
返回顶部