zoukankan      html  css  js  c++  java
  • vue 视频播放

    <template>
      <div>
        <video
          id="my-video"
          class="video-js vjs-default-skin vjs-big-play-centered box"
          controls
          preload="none"
        >
          <source src="" type="application/x-mpegURL">
        </video>
        <el-button @click="checkVideoFirst">开始播放</el-button>
        <el-button @click="checkVideo">点击切换到CCTV3</el-button>
      </div>
    </template>

    <script>
    /* eslint-disable */
    import videojs from 'video.js'
    import 'videojs-contrib-hls'
    export default {
      name: 'Video',
      data () {
        return {
        }
      },
      methods:{
        checkVideo() {
            var myPlayer = videojs("my-video",  {bigPlayButton: true,
                    textTrackDisplay: false,
                    posterImage: true,
                    errorDisplay: false,
                    controlBar: true,
                    });
            myPlayer.src([
                {
                    type: "application/x-mpegURL",
                    src: "http://ivi.bupt.edu.cn/hls/cctv3hd.m3u8" //CCTV3频道
                }
            ]);
            myPlayer.play();
        },
        checkVideoFirst(){
           var first =  videojs("my-video",{
                    bigPlayButton: true,
                    textTrackDisplay: false,
                    posterImage: true,
                    errorDisplay: false,
                    controlBar: true,
                    });
            first.src([
                {
                    type: "application/x-mpegURL",
                    src: "http://ivi.bupt.edu.cn/hls/cctv1hd.m3u8" //CCTV3频道
                }
            ]);
            first.play();
        }
      }
    }
    </script>
    <style scoped>
    .box {
         600px;
        height: 600px;
        border: 20px solid;
    }
    </style>
  • 相关阅读:
    cygwin配合NDK开发Android程序
    和菜鸟一起学c之函数指针
    和菜鸟一起学android4.0.3源码之SD卡U盘等自动挂载配置
    Android系统的开机画面显示过程分析
    android编译系统的makefile文件Android.mk写法
    Linux下makefile教程
    和菜鸟一起学linux之本地git中心仓库建立
    强人总结的Windows XP实用技巧45条(一)
    Webshell下自动挂马的ASP
    多进程Telnet的木马例子
  • 原文地址:https://www.cnblogs.com/flyShare/p/14745790.html
Copyright © 2011-2022 走看看