前段时间项目需要接入播放器，直播视频，调研了很久也试了很多方式，最后采用的是LivePlayer这种框架，还有几个播放器也是不错的，后面会再简单的记录一下的。
LivePlayer H5：https://www.liveqing.com/docs/download/LivePlayer.html
西瓜播放器：http://h5player.bytedance.com/plugins/#xgplayer-hls （中文文档很不错）
vue-video-player
1，首先是安装 LivePlayer
npm install @liveqing/liveplayer -S
2，在index.html引入js
<script src="liveplayer-lib.min.js"></script>
这个地方我是把liveplayer-lib.min.js下载到了本地，可以从官网里面下载
也可以直接引入
<script src="js/liveplayer-lib.min.js"></script> (我是直接引入不生效才选择下载到本地的)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>*********************************</title>
<script src="liveplayer-lib.min.js"></script>
</head>
<body>
<div id="app"></div>
</body>
</html>
3，页面引入
import LivePlayer from '@liveqing/liveplayer';
components: {
LivePlayer
},
4，页面使用
<live-player
class="live-video"
ref="player"
:videoUrl="videoUrl" <!-- 视频流直播链接 -->
v-loading="loading"
muted <!-- 是否静音 -->
fluent
autoplay<!-- 是否自动播放谷歌浏览器在非静音情况下不能自动播放这个我会在文章后面写解决办法 -->
live>
</live-player>
我看网上好多文章需要添加vue.config.js，我刚开始设置了发现作用并不大就删掉了，不影响我显示效果，这个地方供参考
图片.png
const CopyWebpackPlugin = require('copy-webpack-plugin');
plugins: [
new CopyWebpackPlugin([
{ from: 'node_modules/@liveqing/liveplayer/dist/component/crossdomain.xml'},
{ from: 'node_modules/@liveqing/liveplayer/dist/component/liveplayer.swf'},
{ from: 'node_modules/@liveqing/liveplayer/dist/component/liveplayer-lib.min.js', to: 'js/'}
]),
]
自动播放我同时设置了，静音，自动播放没有生效，才使用的这种比较笨的方法
$.ajax({
url: "",
type: "get",
data: {},
success: function (result) {
_this.$emit('allinit');
setTimeout(function(){ // <-----重点，加一个定时器而已
_this.$refs.player.play();
}, 100);
})
},
error: function (result) {
_this.$emit('allinit');
alert('出错了');
}
});
珍爱生命远离代码 ！-_-
网友评论