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>
  • 相关阅读:
    DeepIn系统使用和相关软件安装
    在JDK11中生成JRE11的方法
    IIS 7 中设置文件上传大小的方法
    在服务器上发布MVC5的应用
    安装了多个Oracle11g的客户端,哪个客户端的tnsnames.ora会起作用?
    配置putty或SecureCRT防止SSH连接中断
    借助FRP反向代理实现内网穿透
    你不知道的hostname命令
    Perl脚本通过Expect登陆多台设备批量执行命令并Log
    Linux内核参数配置
  • 原文地址:https://www.cnblogs.com/flyShare/p/14745790.html
Copyright © 2011-2022 走看看