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', //設(shè)置封面圖autoPlay: false,disableCanAutoPlay: true, //禁用檢測(cè)瀏覽器是否可以自動(dòng)播放視頻hideMediaControl: true, //禁用媒體控制自動(dòng)隱藏hideMediaControlDelay: 100, //更改默認(rèn)的媒體控件自動(dòng)隱藏超時(shí)值hideVolumeBar: true, //當(dāng)嵌入的寬度小于320時(shí)，音量條將被隱藏// watermark: 'img/ticket.jpg', //在視頻上自動(dòng)添加水印position: 'top-right', //水印位置四個(gè)角bottom-left，bottom-right，top-left和top-right// watermarkLink: 'http://simple.com',//定義單擊水印時(shí)打開的URL 未定義不可點(diǎn)擊exitFullscreenOnEnd: false, //禁用播放器將在媒體結(jié)束時(shí)自動(dòng)退出全屏顯示，即播放結(jié)束后不會(huì)退出全屏mediacontrol: {seekbar: "#000", buttons: "#FFF"}, //定義進(jìn)度條和底部暫停等圖標(biāo)的顏色events: {onPlay: function() { //當(dāng)播放時(shí)console.log("播放")},onPause: function() { //當(dāng)暫停時(shí)console.log("暫停")},onEnded: function() { //放播放結(jié)束時(shí)console.log("結(jié)束")},onSeek: function() { //當(dāng)查找視頻進(jìn)度時(shí)console.log("快進(jìn)/后退")},onError: function() { //當(dāng)播放出錯(cuò)時(shí)alert("播放出錯(cuò)!")},onTimeUpdate: function(e) { // e.current - 當(dāng)前播放時(shí)間 e-total - 總時(shí)長(zhǎng)console.log(e)},}});player.attachTo(playerElement); //添加資源到dom中

總結(jié)

以上是生活随笔為你收集整理的clappr：可扩展网页媒体播放器使用（在vue中的使用）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。