今天又搞了一波视频播放其中项目需要支持直播视频翻阅了之前写的代码感觉太麻烦了所以还是把写在这里吧避免找的时候太麻烦了官网地址Video.js - Make your player yours | Video.jshtml 引入 videojs脚本与cssscript src/static/public/js/video.min.js/script link relstylesheet href/static/public/css/video-js.css //html 部分 video idvideo classvideo-js vjs-16-9 x5-video-player-fullscreen playsinline webkit-playsinline x-webkit-airplay width100% height100% 您的浏览器不支持当前播放器请升级最新的浏览器版本。 /videonew Vue({ el: #app, data: { playIndex: 0, player: null, video: { poster: http://china-beauty.oss-cn-shenzhen.aliyuncs.com/live/192/5203c86471184367ad37a6b3ceb56995.jpg, list: [ { url: http://china-beauty-live.oss-cn-shanghai.aliyuncs.com/live/record/2020-12-26/Stream1608543148068/2020-12-26-11:47:14_2020-12-26-11:48:33.mp4 }, { url: http://china-beauty-live.oss-cn-shanghai.aliyuncs.com/live/record/2020-12-26/Stream1608543225736/2020-12-26-09:58:29_2020-12-26-11:55:34.mp4 }, { url: https://cctvwbcdali.v.myalicdn.com/cctvwbcd/cdrmcctv1_1td.m3u8//直播测试 }] } }, watch: { playIndex(val) { this.playVideo(this.video.list[val]); } }, computed: { }, mounted() { this.player videojs(video, { autoplay: muted, // 是否自动播放 loop: false, controls: true, // 是否显示控件 poster: this.video.poster, sources: [{ src: this.video.list[this.playIndex].url }] }); // 结束监听 this.player.on(ended, () { if (this.playIndex this.video.list.length) { this.playIndex } }) }, methods: { playVideo(sources) { videojs(video).src(sources.url) } } })效果图
