1、安裝

cnpm install clappr --save

2、引用

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

import Clappr from 'clappr';

3、使用

<!-- 視頻播放 -->

<div id="videoPlayer123" v-show="showshipin" class="imgWrap" style="width:100%;height:240px;">

</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中的使用）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。