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>
  • 相关阅读:
    绑定对象
    类与对象
    视音频技术干货专栏
    sqlite3把字段为int32(用c++的time(nullptr)获取的)的秒数显示为年月日时分秒
    微信小程序开发 --- 小白之路 --- 心得
    spring cloud --- config 配置中心 [本地、git获取配置文件]
    spring cloud --- Zuul --- 心得
    spring boot --- 注解 @Bean 和@Component
    spring cloud --- Feign --- 心得
    spring cloud --- Ribbon 客户端负载均衡 + RestTemplate + Hystrix 熔断器 [服务保护] ---心得
  • 原文地址:https://www.cnblogs.com/flyShare/p/14745790.html
Copyright © 2011-2022 走看看