<template>
    <div id="app">
        <DoHlsVideo :videoSrc="src2" width="600px" height="500px"/>
        <router-view></router-view>
    </div>
</template>

<script>
export default {
    name: "app",
    data() {
        return {
            textStyle: {
                left: "50%"
            },
            fun: (aa, bb) => {},
            to: {
                color: "#673ab7"
            },
            from: {
                color: "#ff5722"
            },
            src1:
                "https://logos-channel.scaleengine.net/logos-channel/live/biblescreen-ad-free/playlist.m3u8",
            src2:
                "http://hls01open.ys7.com/openlive/0c36933110cc427ea14f1bb83da0b8e0.m3u8",
            src3: "http://vjs.zencdn.net/v/oceans.mp4",
            src4:
                "http://hls.open.ys7.com/openlive/a8024bac9ff946c6992b373b4e6a17ab.m3u8"
        };
    }
};
</script>

<style>
#app {
    font-family: "Avenir", Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    margin-top: 60px;
}
</style>
