clappr：可扩展网页媒体播放器使用（在vue中的使用）

1、安装

cnpm install clappr --save

2、引用

在需要使用的vue组件中引入即可，

import Clappr from 'clappr';

3、使用

</div>

var mp4Url = dataV[0].视频地址;var playerElement = document.getElementById("videoPlayer123");var player = new Clappr.Player({source: mp4Url,mute: false, //静音为truewidth:'100%',height:'100%',// poster:'http://clappr.io/poster.png', //设置封面图autoPlay: false,disableCanAutoPlay: true, //禁用检测浏览器是否可以自动播放视频hideMediaControl: true, //禁用媒体控制自动隐藏hideMediaControlDelay: 100, //更改默认的媒体控件自动隐藏超时值hideVolumeBar: true, //当嵌入的宽度小于320时，音量条将被隐藏// watermark: 'img/ticket.jpg', //在视频上自动添加水印position: 'top-right', //水印位置四个角bottom-left，bottom-right，top-left和top-right// watermarkLink: 'http://simple.com',//定义单击水印时打开的URL 未定义不可点击exitFullscreenOnEnd: false, //禁用播放器将在媒体结束时自动退出全屏显示，即播放结束后不会退出全屏mediacontrol: {seekbar: "#000", buttons: "#FFF"}, //定义进度条和底部暂停等图标的颜色events: {onPlay: function() { //当播放时console.log("播放")},onPause: function() { //当暂停时console.log("暂停")},onEnded: function() { //放播放结束时console.log("结束")},onSeek: function() { //当查找视频进度时console.log("快进/后退")},onError: function() { //当播放出错时alert("播放出错!")},onTimeUpdate: function(e) { // e.current - 当前播放时间   e-total - 总时长console.log(e)},}});player.attachTo(playerElement); //添加资源到dom中

clappr：可扩展网页媒体播放器使用（在vue中的使用）相关推荐

jwplayer html插件,jw player(网页媒体播放器插件) v2017 最新版
软件标签: jwplayer flash插件播放器插件 jwplayer是一款功能十分强大的网页播放器,安装此插件后,用户可以使用网页观看各种格式视频,功能有些类似于flash,不过支持的视频格式更 ...
html网页转换swf格式,[转]html网页 swf播放器使用代码
可加装广告的swf播放器JS代码加载flash动画前可以加载代码,设定广告显示秒数这些,还有些小bug,等有空了修复好法上来给大家 1. [代码][Java]代码/p> (原创)jQuer ...
数字媒体播放器行业调研报告 - 市场现状分析与发展前景预测
数字媒体播放器市场的企业竞争态势该报告涉及的主要国际市场参与者有Google.Roku.Sony.Asus.Microsoft.Samsung Electronics.Amazon.Apple.Ph ...
Plyr – 简单，灵活的 HTML5 媒体播放器
Plyr 是一个简单的 HTML5 媒体播放器,包含自定义的控制选项和 WebVTT 字幕.它是只支持现代浏览器,轻量,方便和可定制的媒体播放器.还有的标题和屏幕阅读器的全面支持. 在线演示 ...
媒体播放器三大底层架构
2019独角兽企业重金招聘Python工程师标准>>> 媒体播放工具,这里主要指视频播放,因为要面临庞大的兼容性和纷繁复杂的算法,从架构上看,能脱颖而出的体系屈指可数.大体来说业界主 ...
linux 嵌入式播放器,基于Linux的嵌入式媒体播放器研究
摘要: 计算机多媒体技术和嵌入式技术的高速发展,各种集计算机.通信.消费电子产品等特征于一体的电子产品得以广泛应用,嵌入式媒体播放器已经成为此类产品中主要的应用软件.同时,随着Linux系统在各种嵌入 ...
VLC媒体播放器Web插件详细说明
原文地址:https://wiki.videolan.org/Documentation:WebPlugin/ 简介:使用视频构建网页该VLC媒体播放器 webplugins是原生浏览器插件,类似于 ...
基于QT平台的手持媒体播放器项目实战视频教程下载
分享一套关于在QT平台的手持媒体播放器项目实战的视频教程,Qt是一个1991年由奇趣科技开发的跨平台C++图形用户界面应用程序开发框架. 它既可以开发GUI程式,也可用于开发非GUI程式,比如控制台工 ...
java制作媒体播放器_用Java构造自己的媒体播放器
一.概述首先我们来看看构造这个媒体播放器要达到什么样的目标,确定了目标也就确定了代码量和程序的复杂程度.本文的媒体播放器要达到如下目标: 媒体播放器是一个菜单驱动的简单AWT应用. 媒体播放器包含一 ...

clappr：可扩展网页媒体播放器使用（在vue中的使用）

clappr：可扩展网页媒体播放器使用（在vue中的使用）相关推荐

最新文章

热门文章