关于“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.js和videojs-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"></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 = ' / ';
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;"></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;"></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技术站
微信扫一扫 
支付宝扫一扫 