vue basic sample

演示说明

一、演示预览缩略图

将鼠标放在进度条上可以出现预览图像，点击预览图像，可以定位到图像内容相近位置

二、演示双字幕

字幕加载放在setTimeout时钟事件里，实际使用时可以放在ajax回调函数里异步加载

三、演示自动小窗口

如果页面内容太多，导致页面出现滚动条，当滚动发生导致播放器被完全滚出屏幕时，将弹出视频小窗口。

四、获取当前时间CurrentTime

0

<template>
    <div class="hello-world">
        <div class="hello">
            <zwplayer v-if="playerOpen" ref="zwplayerRef" nodeid="main-playerxxx" :murl="movieUrl"
                :thumbnails="thumbnails" @onready="onPlayerReady" @onmediaevent="onPlayerMediaEvent"
                :snapshotButton="true" :optionButton="true" :sendDanmu="sendDanmu" :infoButton="false"
                :enableDanmu="true" :chapterButton="true" :autoSmallWindow="true" :fluid="true" :lostFocusPause="true"
                :logo="logo" danmuBar="danmu-controlbar" />
        </div>
        <div class="memo">
            <!-- 将这个 div 设置的很高，让页面出现滚动条，用于演示自动小窗口模式//-->
            <div class="memo-title">演示说明</div>
            <div class="memo-item">
                <h3>一、演示预览缩略图</h3>
                <p>将鼠标放在进度条上可以出现预览图像，点击预览图像，可以定位到图像内容相近位置</p>
            </div>
            <div class="memo-item">
                <h3>二、演示双字幕</h3>
                <p>字幕加载放在setTimeout时钟事件里，实际使用时可以放在ajax回调函数里异步加载</p>
            </div>
            <div class="memo-item">
                <h3>三、演示自动小窗口</h3>
                <p>如果页面内容太多，导致页面出现滚动条，当滚动发生导致播放器被完全滚出屏幕时，将弹出视频小窗口。</p>
            </div>
            <div class="memo-item">
                <h3>四、获取当前时间CurrentTime</h3>
                <div><button v-on:click="currentTime">CurrentTime</button><span
                        class="current-time">{{ CurrentTime }}</span></div>
            </div>
        </div>
    </div>
</template>

<script>
    import {
        zwplayer
    } from 'zwplayer-vue2x'

    export default {
        name: 'HelloWorld',
        components: {
            zwplayer
        },
        data() {
            return {
                marker_list: [{
                        "title": "浙江队晋级与争议",
                        "desc": "讨论浙江队在CBA比赛中的惊险胜利和历史性晋级总决赛，以及深圳队的争议性失利和球迷的激烈反应。",
                        "time":0 ,
                        "duration": 44,
                        "thumb": null
                    },
                    {
                        "title": "裁判问题与篮协应对",
                        "desc": "分析比赛中裁判的吹罚尺度和争议，以及中国篮协和CBA公司对裁判问题的反应和处理措施。",
                        "time": 44,
                        "duration": 97,
                        "style" : {"background": "blue"},
                        "image": null
                    },
                    {
                        "title": "NBA赛场争议与湖人挑战",
                        "desc": "探讨NBA赛场上的争议，特别是湖人队在季后赛中的表现和面临的挑战，以及篮球评论员对这些事件的看法和预测。",
                        "time": 141,
                        "duration": 76,
                        "style" : {"background": "green"},
                        "image": null
                    },


                ],
                logo: {
                    icon: 'https://www.zwplayer.cn/uploadfile/test/zwplayer-960.png',
                    dock: 'right',
                    opacity: '70',
                    //x: '10%',
                    y: '2%',
                    width: '15%'
                },
                movieUrl: 'https://www.zwplayer.cn/uploadfile/test/VMAP9lxJvRpgn5sP3lV6rQ9qkzQmh5psggso3185.mp4',
                thumbnails: {
                    "url": "https://www.zwplayer.cn/uploadfile/test/b44c43c90be3521bc352aad1e80f9cd0_thumb.jpg",
                    "width": 160,
                     "height": 90,
                     "row": 9,
                     "col": 9,
                     "total": 74
                },
                playerOpen: true,
                CurrentTime: 0
            };
        },
        props: {
            msg: String
        },
        methods: {
            onPlayerReady() {
                console.log('player ready event.');

                let player = this.$refs.zwplayerRef;
                var that = this
                setTimeout(function() {
                    if (player) {

                        let subtitleURL_korean =
                            'https://www.zwplayer.cn/uploadfile/test/VMAP9lxJvRpgn5sP3lV6rQ9qkzQmh5psggtFawR3lNR7hQ2_kore.srt';
                        let subtitleURL_japan =
                            'https://www.zwplayer.cn/uploadfile/test/VMAP9lxJvRpgn5sP3lV6rQ9qkzQmh5psggtFawR3lNR7hQ2_jpan.srt';

                        player.addSubtitle(subtitleURL_korean, '1');

                        player.addSubtitle(subtitleURL_japan, '2');

                        console.log(that.marker_list)
                        player.setChapters(that.marker_list);
                    }
                }, 1000)
            },
            onPlayerMediaEvent(event) {
                console.log('media event:', event.type);
            },
            sendDanmu: function(danmu) {
                console.log('sendDanmu:', danmu);
                // 调用websocket等方法将弹幕实际发送出去
            },
            currentTime: function() {
                let player = this.$refs.zwplayerRef;
                // 用于界面显示
                this.CurrentTime = player.getCurrentTime(); //CurrentTime;
            }
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    .hello {
        width: 1280px;
        min-height: 220px;
        box-sizing: border-box;
        margin: 0 auto;
        background-color: #222;
    }

    .memo {
        width: 1280px;
        min-height: 2000px;
        margin: 20px auto;
    }

    .memo-title {
        font-weight: bold;
        font-size: 22px;
    }

    .current-time {
        display: inline-block;
        padding: 2px 5px;
    }

    h3 {
        margin: 40px 0 0;
    }

    ul {
        list-style-type: none;
        padding: 0;
    }

    li {
        display: inline-block;
        margin: 0 10px;
    }

    a {
        color: #42b983;
    }
</style>