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>
  • 相关阅读:
    iOS 模拟定位(自定义手机定位)
    iOS 关于启动app循环播放视频功能(常用于登录时)
    ios开发首次安装或者版本升级的引导页的判断
    字符串base64加密、解密
    ios/oc banner广告位---- 打开浏览器跳转链接
    oc 字符串 如何去掉前后空格、回车键
    swagger文档接口指定参数必传的方式
    打包运行报no main manifest attribute, in XXXX的解决办法
    @Query 报错Validation failed for query for method public abstract的解决办法
    两种获取随机字符串的方法
  • 原文地址:https://www.cnblogs.com/flyShare/p/14745790.html
Copyright © 2011-2022 走看看