web-3x/UI
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix: play video

Browse Source
This commit is contained in:
koh 2024-06-15 18:57:59 +07:00
parent be1cd96685
commit 0313d95ed9
5 changed files with 1421 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored Normal file
View File

@ -0,0 +1 @@
node_modules

1393
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

2
package.json
View File

@ -17,9 +17,9 @@
"socket.io-client": "^4.7.5", "socket.io-client": "^4.7.5",
"swiper": "^11.1.4", "swiper": "^11.1.4",
"vant": "^4.9.1", "vant": "^4.9.1",
"video.js": "^8.12.0",
"videojs-contrib-hls": "^5.15.0", "videojs-contrib-hls": "^5.15.0",
"vue": "^3.4.21", "vue": "^3.4.21",
"vue-hls-video-player": "^1.0.1",
"vue-router": "^4.0.13" "vue-router": "^4.0.13"
}, },
"devDependencies": { "devDependencies": {

7
src/assets/css/chunkVendor.css
View File

@ -8976,13 +8976,14 @@ button.swiper-pagination-bullet {
.video-js.vjs-fill, .video-js.vjs-fill,
.video-js .vjs-tech { .video-js .vjs-tech {
width: 100%; width: 100%;
height: 100%; /* height: 100%; */
height: 200px;
} }
.video-js .vjs-tech { .video-js .vjs-tech {
position: absolute; /* position: absolute;
top: 0; top: 0;
left: 0; left: 0; */
} }
body.vjs-full-window { body.vjs-full-window {

32
src/components/video/PlayVideo.vue
View File

@ -2,7 +2,13 @@
import { ref } from "vue"; import { ref } from "vue";
import { useRoute } from "vue-router"; import { useRoute } from "vue-router";
import { dataVideo } from "./index.js" import { dataVideo } from "./index.js"
import videojs from 'video.js';
import { VideoPlayer } from 'vue-hls-video-player';
function processPause(progress) {
console.log(progress)
}
export default { export default {
setup() { setup() {
@ -24,7 +30,8 @@ export default {
show, show,
dataVideo dataVideo
}; };
} },
components: { VideoPlayer }
}; };
</script> </script>
@ -49,13 +56,18 @@ export default {
class="video-js noVip my-video-dimensions vjs-controls-enabled vjs-touch-enabled vjs-v7 vjs-has-started vjs-user-active vjs-paused" class="video-js noVip my-video-dimensions vjs-controls-enabled vjs-touch-enabled vjs-v7 vjs-has-started vjs-user-active vjs-paused"
id="my-video" id="my-video"
> >
<video
id="my-video_html5_api" <VideoPlayer
class="vjs-tech" type="default"
preload="auto" @pause="processPause"
controls :previewImageLink="currentVideo.vod_pic"
:src="currentVideo.vod_play_url" :link="currentVideo.vod_play_url"
></video> :progress="30"
:isMuted="false"
:isControls="true"
class="vjs-tech"
id="my-video_html5_api"
/>
</div> </div>
</div> </div>
@ -69,7 +81,7 @@ export default {
<div><span>Xem thêm</span></div> <div><span>Xem thêm</span></div>
</div> </div>
<div class="movie-list"> <div class="movie-list">
<div class="movie-play-item" v-for="vd in dataVideo"> <div class="movie-play-item" v-for="vd in dataVideo" :key="vd.id">
<div> <div>
<img :src="vd.vod_pic" /> <img :src="vd.vod_pic" />
<div> <div>