當(dāng)前位置:
首頁(yè) >
clappr:可扩展网页媒体播放器使用(在vue中的使用)
發(fā)布時(shí)間:2024/3/13
42
豆豆
生活随笔
收集整理的這篇文章主要介紹了
clappr:可扩展网页媒体播放器使用(在vue中的使用)
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
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)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 第二十九章 狼心狗肺
- 下一篇: vue elementUI弹窗使用des