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源码分享的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!


扫一扫关注最新编程教程