整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
嘍，大家好！今天繼續(xù)給大家分享 50 各素材網(wǎng)站，網(wǎng)站鏈接都已附上，方便大家查閱！
溫馨提示：以下是一些免費(fèi)的視頻素材網(wǎng)站，不過部分網(wǎng)站可能需要注冊(cè)或遵守相關(guān)的使用規(guī)定：
好了，以上及時(shí)給大家分享的最新 50 個(gè)素材網(wǎng)站，大家記得點(diǎn)贊收藏，以備不時(shí)之需！
npm install vue-video-player --saveimport VideoPlayer from 'vue-video-player'
import 'vue-video-player/src/custom-theme.css'
import 'video.js/dist/video-js.css'
Vue.use(VideoPlayer)注：我看網(wǎng)上有很多作者在組件引入的時(shí)候沒有引入：import 'vue-video-player/src/custom-theme.css' ；我在沒有引入的時(shí)候出現(xiàn)播放按鈕會(huì)出現(xiàn)變形不對(duì)齊等原因（我是在h5上面的，大家可以根據(jù)實(shí)際情況引入）
import { videoPlayer } from 'vue-video-player'
import 'video.js/dist/video-js.css'
import 'vue-video-player/src/custom-theme.css'
export default {
components: {
videoPlayer
}
} <template>
<div>
<div class='video'>
<video-player class="video-player vjs-custom-skin"
ref="videoPlayer"
:playsinline="true"
:options="playerOptions">
</video-player>
</div>
</div>
</template>data () {
return {
playerOptions: {
playbackRates: [0.5, 1.0, 1.25, 1.5, 2.0], // 可選的播放速度
autoplay: false, // 如果為true,瀏覽器準(zhǔn)備好時(shí)開始回放。
muted: false, // 默認(rèn)情況下將會(huì)消除任何音頻。
loop: false, // 是否視頻一結(jié)束就重新開始。
preload: 'auto', // 建議瀏覽器在<video>加載元素后是否應(yīng)該開始下載視頻數(shù)據(jù)。auto瀏覽器選擇最佳行為,立即開始加載視頻（如果瀏覽器支持）
language: 'zh-CN',
aspectRatio: '16:9', // 將播放器置于流暢模式，并在計(jì)算播放器的動(dòng)態(tài)大小時(shí)使用該值。值應(yīng)該代表一個(gè)比例 - 用冒號(hào)分隔的兩個(gè)數(shù)字（例如"16:9"或"4:3"）
fluid: true, // 當(dāng)true時(shí)，Video.js player將擁有流體大小。換句話說，它將按比例縮放以適應(yīng)其容器。
sources: [{
type: 'video/mp4', // 類型
src: '' // url地址
}],
poster: '', // 封面地址
notSupportedMessage: '此視頻暫無法播放，請(qǐng)稍后再試', // 允許覆蓋Video.js無法播放媒體源時(shí)顯示的默認(rèn)信息。
controlBar: {
timeDivider: true, // 當(dāng)前時(shí)間和持續(xù)時(shí)間的分隔符
durationDisplay: true, // 顯示持續(xù)時(shí)間
remainingTimeDisplay: false, // 是否顯示剩余時(shí)間功能
fullscreenToggle: true // 是否顯示全屏按鈕
}
}
}
}微信端
普通瀏覽器端
this.$refs.videoPlayer.player.play() // 播放
this.$refs.videoPlayer.player.pause() // 暫停
this.$refs.videoPlayer.player.src(src) // 重置進(jìn)度條 <template>
<div class='demo'>
<video-player class="video-player vjs-custom-skin"
ref="videoPlayer"
:playsinline="true"
:options="playerOptions"
@play="onPlayerPlay($event)"
@pause="onPlayerPause($event)"
@ended="onPlayerEnded($event)"
@waiting="onPlayerWaiting($event)"
@playing="onPlayerPlaying($event)"
@loadeddata="onPlayerLoadeddata($event)"
@timeupdate="onPlayerTimeupdate($event)"
@canplay="onPlayerCanplay($event)"
@canplaythrough="onPlayerCanplaythrough($event)"
@statechanged="playerStateChanged($event)"
@ready="playerReadied"
>
</video-player>
</div>
</template>
<script>
export default {
methods: {
// 播放回調(diào)
onPlayerPlay(player) {
console.log('player play!', player)
},
// 暫停回調(diào)
onPlayerPause(player) {
console.log('player pause!', player)
},
// 視頻播完回調(diào)
onPlayerEnded($event) {
console.log(player)
},
// DOM元素上的readyState更改導(dǎo)致播放停止
onPlayerWaiting($event) {
console.log(player)
},
// 已開始播放回調(diào)
onPlayerPlaying($event) {
console.log(player)
},
// 當(dāng)播放器在當(dāng)前播放位置下載數(shù)據(jù)時(shí)觸發(fā)
onPlayerLoadeddata($event) {
console.log(player)
},
// 當(dāng)前播放位置發(fā)生變化時(shí)觸發(fā)。
onPlayerTimeupdate($event) {
console.log(player)
},
//媒體的readyState為HAVE_FUTURE_DATA或更高
onPlayerCanplay(player) {
// console.log('player Canplay!', player)
},
//媒體的readyState為HAVE_ENOUGH_DATA或更高。這意味著可以在不緩沖的情況下播放整個(gè)媒體文件。
onPlayerCanplaythrough(player) {
// console.log('player Canplaythrough!', player)
},
//播放狀態(tài)改變回調(diào)
playerStateChanged(playerCurrentState) {
console.log('player current update state', playerCurrentState)
},
//將偵聽器綁定到組件的就緒狀態(tài)。與事件監(jiān)聽器的不同之處在于，如果ready事件已經(jīng)發(fā)生，它將立即觸發(fā)該函數(shù)。。
playerReadied(player) {
console.log('example player 1 readied', player);
}
},
}
</script>文章借鑒與掘金；作者：dingFY;連接 https://juejin.cn/post/6844903989641740296
如果是h5的開發(fā)者做了適配的話；需要在.postcssrc.js中或忽略vue-video-player的適配；否則會(huì)出現(xiàn)一些小的樣式問題
selectorBlackList: ['vjs-'], // 忽略u(píng)i組件的如果大家想要查看怎么配置h5的適配問題可以查看這個(gè)鏈接：vue項(xiàng)目中移動(dòng)端適配，postcss-pxtorem
如果有什么不對(duì)的地方；歡迎大家補(bǔ)充；相互學(xué)習(xí)、共勉
embed和object有一個(gè)特點(diǎn)，就是無法動(dòng)態(tài)渲染，所以無法通過jQuery去操作dom實(shí)現(xiàn)數(shù)據(jù)加載，要改變數(shù)據(jù)，可以重新篩一遍達(dá)到效果
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
