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>
  • 相关阅读:
    Markdown简单介绍和基本的语法
    Unsupported major.minor version 51.0问题的解决
    Android高级控件(一)——ListView绑定CheckBox实现全选,添加和删除等功能
    kqueue演示样例
    华为离职副总裁徐家骏的工作感悟
    菜鸟之路-浅谈设计模式之单例设计模式
    【gsl】生成随机数
    【C语言】pragma
    【数据结构】二叉堆
    【编程题目】查找最小的 k 个元素
  • 原文地址:https://www.cnblogs.com/flyShare/p/14745790.html
Copyright © 2011-2022 走看看