m3u8, flv, mp4格式视频demo源码分享
2021/7/16 12:06:11
本文主要是介绍m3u8, flv, mp4格式视频demo源码分享,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>m3u8, flv, mp4格式视频demo源码分享</title> <link rel="stylesheet" type="text/css" href="http://qqxqs.com/resource/wetpl/default/web/css/index_new.css"/> <script src="https://unpkg.com/vue@next"></script> <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script> <script src="http://bilibili.github.io/flv.js/dist/flv.js"></script> <style> * { margin: 0; padding: 0 } ::-webkit-scrollbar { width: 0 !important; display: none } select { width: 200px; height: 30px; text-indent: 6px; } html, body { width: 100vw; height: 100vh; position: fixed; } div#app { width: 100vw; height: 100vh; position: fixed; overflow-y: auto; } article.fruit { display: flex; align-items: center; padding: 15px 10px 5px; } article.videoBox { display: flex; flex-wrap: wrap; padding: 5px; } section { flex: 1; border: 1px solid #006699; margin: 5px; } section>h4 { padding: 5px 10px; background: #00669994; color: #fff; font-size: 16px; font-weight: 400; text-align: center; } section>aside { width: 940px; height: 416px; display: flex; justify-content: space-evenly; align-items: center; flex-wrap: wrap; padding: 10px 0; } section>aside>video { object-fit: fill; margin: 4px 0; background-color: #cccccc; outline: 1px solid #cccccc; } section>aside .video-js { margin: 4px 0; } </style> </head> <body> <div id="app"> <article class="fruit"> 分屏: <select v-model="tab"> <option :value="1">一分屏</option> <option :value="4">四分屏</option> <option :value="6">六分屏</option> </select> </article> <article class="videoBox"> <section class="m3u8"> <h4>m3u8</h4> <aside> <video v-for="(v,k) in splitVideom3u8" :key="k" :ref=`hls_video_player${v.id}` autoplay controls preload muted :width="tab == 6 ? 300 : tab == 4 ? 460 : 920" :height="tab == 6 ? 200 : tab == 4 ? 200 : 410" /> </aside> </section> <section class="flv"> <h4>flv</h4> <aside> <video v-for="(v, k) in splitVideoFlv" :key="k" :id=`flv_video_player${v.id}` controls preload muted :width="tab == 6 ? 300 : tab == 4 ? 460 : 920" :height="tab == 6 ? 200 : tab == 4 ? 200 : 410" /> </aside> </section> <section class="MP4"> <h4>mp4</h4> <aside> <video v-for="(v, k) in videoFlv" :key="k" autoplay loop muted :src="videoMp4" v-show="v.id<=tab" :width="tab == 6 ? 300 : tab == 4 ? 460 : 920" :height="tab == 6 ? 200 : tab == 4 ? 200 : 410" /> </aside> </section> </article> </div> <script> const app = { data() { return { videom3u8: [ { id: 1, url: 'http://ivi.bupt.edu.cn/hls/cctv9hd.m3u8' }, { id: 2, url: 'http://ivi.bupt.edu.cn/hls/hunanhd.m3u8' }, { id: 3, url: 'http://ivi.bupt.edu.cn/hls/cctv1hd.m3u8' }, { id: 4, url: 'http://ivi.bupt.edu.cn/hls/cctv2hd.m3u8' }, { id: 5, url: 'http://ivi.bupt.edu.cn/hls/cctv3hd.m3u8' }, { id: 6, url: 'http://ivi.bupt.edu.cn/hls/cctv4hd.m3u8' }, // { id: 7, url: 'http://ivi.bupt.edu.cn/hls/cctv6hd.m3u8' }, // { id: 8, url: 'http://ivi.bupt.edu.cn/hls/cctv8hd.m3u8' }, // { id: 9, url: 'http://192.168.31.186:8080/live/qiangji/qiangji.m3u8' }, ], videoFlv: [ { id: 1, url: 'http://1011.hlsplay.aodianyun.com/demo/game.flv' }, { id: 2, url: 'http://1011.hlsplay.aodianyun.com/demo/game.flv' }, { id: 3, url: 'http://1011.hlsplay.aodianyun.com/demo/game.flv' }, { id: 4, url: 'http://1011.hlsplay.aodianyun.com/demo/game.flv' }, { id: 5, url: 'http://1011.hlsplay.aodianyun.com/demo/game.flv' }, { id: 6, url: 'http://1011.hlsplay.aodianyun.com/demo/game.flv' } // { id: 7, url: 'http://192.168.31.186:8080/live/34020000001320000002@34020000001320000002.flv' } // { id: 8, url: 'http://192.168.31.186:8080/live/34020000001320000002@34020000001320000002.flv' } // { id: 9, url: 'http://192.168.31.186:8080/live/34020000001320000002@34020000001320000002.flv' } ], videoMp4: 'https://video_shejigao.redocn.com/video/201801/20180131/Redcon_201801291122194680611553.mp4', splitVideom3u8: [], splitVideoFlv: [], flvPlayer: [], hlsPlayer: [], tab: 6 } }, created() { this.splitVideom3u8 = this.videom3u8.slice(0, this.tab); this.splitVideoFlv = this.videoFlv.slice(0, this.tab); }, mounted() { this.$nextTick(() => { this.flv_createVideo(this.videoFlv); this.hls_createVideo(this.videom3u8); }); }, methods: { /* Flv 加载 .flv 格式视频 */ // 分屏切换调起 flv_splitScreen(use, used) { console.log(use, used); if (this.flvPlayer.length > 0) { if (used === use) { return false; } else if (used > use) { this.splitVideoFlv.splice(use); this.flvPlayer.splice(use).forEach((v, k) => { this.flv_destroy(this.flvPlayer[use + k]); }) } else if (used < use) { let newSlice = this.videoFlv.slice(used, use); this.splitVideoFlv = [...this.splitVideoFlv, ...newSlice] setTimeout(() => { newSlice.forEach((v, k) => { this.flv_created(v, (k + used)); }) }, 300) } } }, // 初始化加载 Flv全部视频 flv_createVideo(event) { if (flvjs.isSupported()) { event.forEach((v, k) => { this.flv_created(v, k) }) } }, // 创建每个 Flv视频对象 flv_created(v, k) { console.log(this.flvPlayer) this.flvPlayer[k] = flvjs.createPlayer({ type: 'flv', isLive: true, hasAudio: false, stashInitialSize: 128, isAutoPlay: false, isContinue: false, lazyLoad: false, url: v.url }, { //当带音频播放时,config部分配置项尽量采取默认状态,否则过分优化会造成卡死 enableWorker: false, enableStashBuffer: false }) flvjs.LoggingControl.enableVerbose = false; this.flvPlayer[k].attachMediaElement(document.getElementById(`flv_video_player${v.id}`)) this.flvPlayer[k].load() setTimeout(() => { document.getElementById(`flv_video_player${v.id}`).play(); this.flvPlayer[k].play() }, 1000) }, // 销毁 Flv对象、dom节点 flv_destroy(player) { if (player) { player.pause(); player.unload(); player.detachMediaElement(); player.destroy(); player = null; } }, /* ******************************************************************************************************************* */ /* Hls 加载 .m3u8 格式视频 */ // 分屏切换调起 hls_splitScreen(use, used) { console.log(use, used); if (this.hlsPlayer.length > 0) { if (used === use) { return false; } else if (used > use) { this.splitVideom3u8.splice(use); this.hlsPlayer.splice(use).forEach((v, k) => { this.hls_destroy(this.hlsPlayer[use + k]); }) } else if (used < use) { let newSlice = this.videom3u8.slice(used, use); this.splitVideom3u8 = [...this.splitVideom3u8, ...newSlice] setTimeout(() => { newSlice.forEach((v, k) => { this.hls_created(v, (k + used)); }) }, 300) } } }, // 初始化加载 Hls全部视频 hls_createVideo(event) { if (Hls.isSupported()) { event.forEach((v, k) => { this.hls_created(v, k) }) } }, // 创建每个 Hls视频对象 hls_created(v, k) { console.log(this.hlsPlayer) if (Hls.isSupported()) { this.hlsPlayer[k] = new Hls(); this.hlsPlayer[k].loadSource(v.url); this.hlsPlayer[k].attachMedia(this.$refs[`hls_video_player${v.id}`]); setTimeout(() => { this.hlsPlayer[k].on(Hls.Events.MANIFEST_PARSED, async () => { await this.$refs[`hls_video_player${v.id}`].play(); }); }, 10) } }, // 销毁 Hls对象、dom节点 hls_destroy(player) { if (player) { player.pause(); player.destroy(); player = null; } }, }, watch: { 'tab': function(use, used) { this.flv_splitScreen(+use, used); this.hls_splitScreen(+use, used); } } } Vue.createApp(app).mount('#app') </script> </body> </html>
这篇关于m3u8, flv, mp4格式视频demo源码分享的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-11-27本地多文件上传的简单教程
- 2024-11-27低代码开发:初学者的简单教程
- 2024-11-27如何轻松掌握拖动排序功能
- 2024-11-27JWT入门教程:从零开始理解与实现
- 2024-11-27安能物流 All in TiDB 背后的故事与成果
- 2024-11-27低代码开发入门教程:轻松上手指南
- 2024-11-27如何轻松入门低代码应用开发
- 2024-11-27ESLint开发入门教程:从零开始使用ESLint
- 2024-11-27Npm 发布和配置入门指南
- 2024-11-27低代码应用课程:新手入门指南