LivePlayer H5播放器（实时视频和历史视频）

1.安装依赖：

npm install @liveqing/liveplayer

2.vue.config.js配置:

const CopyWebpackPlugin = require('copy-webpack-plugin');module.exports = {configureWebpack: {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/'},])]}}

3.在 html 中引用 www 根目录 liveplayer-lib.min.js

<!DOCTYPE HTML>
<html><head><title>template</title>......<script src="js/liveplayer-lib.min.js"></script><!-- 如果正在使用 vue-cli:<script src="<%= BASE_URL %>js/liveplayer-lib.min.js"></script>--></head><body>......</body>
</html>

4.组件中使用（也可以自己独立出来弄成一个组件，方便下次使用）：

import LivePlayer from '@liveqing/liveplayer'......components: {LivePlayer}
......<LivePlayer :videoUrl="videoUrl" fluent autoplay live stretch></LivePlayer>

5.获取视频源：

LivePlayer H5播放器（实时视频和历史视频）相关推荐

H5播放器内置播放视频（兼容绝大多数安卓和ios）
关于H5播放器内置播放视频,这个问题一直困扰我很长一段时间,qq以前提供白名单已经关闭,后来提供了同层属性的控制,或多或少也有点差强人意. 后来一次偶然发现一个非常简单的方法可以实现. 只需要给vid ...
网页全终端视频直播/点播H5播放器EasyPlayer.js正式发布，支持H.265网页播放
在之前的多篇博客<历时半年,终于研发完成了Web网页对H.265(HEVC)直播和点播的支持,WebAssembly(wasm)>.<EasyPlayer.js开发Web H5网页播 ...
免费视频直播、点播H5播放器SkeyeWebPlayer播放常见问题
免费视频直播.点播H5播放器SkeyeWebPlayer使用常见问题 1.用常见问题--配置iframe允许自动播放和全屏 SkeyeWebPlayer播放器在PC上正常情况下单击播放器的全屏按钮是可 ...
免费视频直播、点播H5播放器SkeyeWebPlayer 结合百度地图sdk实现电子地图播放功能
免费视频直播.点播H5播放器SkeyeWebPlayer 结合vue-baidu-map百度地图组件实现电子地图播放功能,最终效果如图所示: SkeyeWebPlayer播放器如何在vue-baidu ...
熊猫TV直播H5播放器架构探索
本文来自熊猫TV音视频技术专家姜雨晴在LiveVideoStackCon 2017上的分享,并有LiveVideoStack整理成文.当下,打造一款播放器已经有比较好的开源实现,但熊猫TV为什么还要自 ...
flash和H5播放器
flash和H5 flash播放器缺点是需要在客户机安装Adobe Flash Player播放器,优点是flflash播放器已经很成熟了,并且浏览器对flflash支持也很好. H5播放器基于 ...
一个简洁的高自定义的H5播放器
问题:移动端的某些展示页面,经常遇到需要嵌入一个短视频的情况(其实还是某程序媛遇到的情况),通常这个视频上只有一个自定义的播放或者暂停按钮,样式简洁,如下图: 为了完成上述需求,写了一个非常简洁的H5 ...
SkeyeWebPlayer.js H5播放器是怎么样炼成的
SkeyeWebPlayer.js H5播放器是由成都视开信息科技开发和维护的一个完善的RTSP.FLV.HLS等多种流媒体协议播放,视频编码支持H.264,H.265,音频支持AAC,支持TCP/U ...
酷播云H5播放器与JS之间交互的实例
酷播云H5播放器与JS之间交互的实例 <!doctype html> <html> <head> <meta charset="utf-8" ...
酷播云H5播放器倍速播放功能
大家好,我是小酷,小酷今天来说说H5播放器倍速播放功能: 酷播云是支持HTML5播放器及Flash播放器,两者兼容,可自由切换.其中,H5播放器自带倍速播放功能,用户可选择视频的播放速度. 酷播云Ht ...

LivePlayer H5播放器（实时视频和历史视频）

LivePlayer H5播放器（实时视频和历史视频）相关推荐

最新文章

热门文章