⑴ vue 騰訊雲點播播放視頻（循環）
<template>
<div>
<div v-for="(item,index) in dataList" :key="index" style="margin-bottom: 11px;">
<video v-if="showFlag" :id="'tcPlayer' + index" preload="auto" width="640" height="368" playsinline
webkit-playsinline x5-playsinline></video>
</div>
</div>
</template>
<script>
export default {
name: 'Detail',
data() {
return {
tcPlayerId: 'tcPlayer' + Date.now(),
player: null,
showFlag: false,
videoFileid: '',
videoAppid: '',
dataList: []
}
},
mounted() {
let self = this
setTimeout(() => {
self.dataList = [{
fileID: '2222222',
appID: '11111',
psign: "ccccccc"
},
{
fileID: '2222222',
appID: '11111',
psign: "cccccccc"
},
]
self.showFlag = true
self.$nextTick(() => {
self.dataList.forEach((value, index) => {
self.getVideoLang(value.fileID, value.appID, value.psign, 'tcPlayer' + index)
})
})
}, 1000)
},
methods: {
// 初始化騰訊雲播放器
getVideoLang(fileID, appID, psign, id) {
const playerParam = {
fileID: fileID,
appID: appID,
psign
}
window.TCPlayer(id, playerParam)
}
}
}
</script>
<style lang="scss">
@import "https://imgcache.qq.com/open/qcloud/video/tcplayer/tcplayer.css"
</style>
// 解決第一次進入視頻不載入問題
beforeDestroy () {
this.player.dispose()
},
⑵ vue頁面緩存（keepAlive）
同人博客搬遷~~~~（播客主頁： https://www.cnblogs.com/epines/ ）
頁面緩存在頁面中長期會使用到，可以更快速的在頁面切換期間的資源獲取
主要是用keep-alive實現
在vue項目中，相關的寫法比較多，還有一些注意點需要仔細
第一種方式
在App.vue中
添加標簽
<keep-alive>
<router-view />
</keep-alive>
這會就是所有的頁面都會被緩存
這里做了兩個頁面的相互跳轉，分別寫了一個輸入框，在輸入內容後，跳轉時，輸入的內容因為緩存的原因會被保留
如果存在某些頁面需要緩存，那麼可以通過keep-alive的屬性去處理
其中就是include和exclude
include：名稱匹配的組件才會被緩存，其中可以寫字元串或正則表達式
exclude：名稱匹配的組件不會被緩存，其中同樣是字元串或正則表達式
這里的名稱是指組件的名稱
<script>
export default {
name: 'HelloWorld'
}
</script>
第二種方式：
在路由中進行設置通過添加meta，route/index.js
export default new Router({
routes: [{
path: '/',
name: 'HelloWorld',
component: HelloWorld,
meta: {
keepAlive: true // 該路由會被緩存
}
},
{
path: '/ss',
name: 'ss',
component: Ss,
meta: { keepAlive:false // 該路由不會被緩存，不需要緩存的時候該屬性可以不用寫 }
}]
})
這時候頁面還需要通過該屬性進行判斷是否緩存
在App.vue
<keep-alive>
<router-view v-if="$route.meta.keepAlive">
</router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive">
</router-view>
這樣寫有個優點就是，需要緩存不需要緩存的name可以隨便寫，不需要做什麼規律性的去寫出一個合適的正則去匹配上，就會更加靈活些
常見的應用場景可以是，列表到詳情頁，從詳情頁返回到列表頁，如果說列表頁沒有做緩存，在單頁面下，會直接返回列表首頁（存在分頁的情況），就不能直接返回至之前離開的列表頁，所以這個地方在列表頁添加頁面緩存後，可以做到返回至之前離開的列表頁
沒有緩存的時候，返回列表：
有緩存的時候，返回列表
所以從某些程度上來講，即增加了頁面的響應速度，又增加了用戶體驗，總體來說，還是比較實用的