video.js使用常用方法110行demo

最新推荐文章于 2024-08-16 07:46:30 发布

百年人生当疯狂

最新推荐文章于 2024-08-16 07:46:30 发布

阅读量1k

点赞数

文章标签： javascript 视频

本文链接：https://blog.csdn.net/qq_42371913/article/details/128814361

版权

video.js是一种非常受欢迎的前端视频播放器库，有很多插件，支持MP4、flv、hls、m3u8等，生态丰富，其本身非常小巧，使用方便。

video.js官网：https://videojs.com/

<!-- https://videojs.com/ -->
<html lang="en"><head>
    <meta charset="utf-8">
    <title>Admin | Video</title>
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
    <meta content="" name="wzy">
    <link href="video-js.css" rel="stylesheet" />

  <!-- If you'd like to support IE8 (for Video.js versions prior to v7) -->
  <!-- <script src="https://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script> -->
</head>

<body>
    <div style="width: 33%;height: 200px;">
        <video
        id="my-video"
        class="video-js"
      >
        <!-- <source src="oceans.mp4" type="video/mp4" /> -->
        <p class="vjs-no-js">
          To view this video please enable JavaScript, and consider upgrading to a
          web browser that
          <a href="https://videojs.com/html5-video-support/" target="_blank"
            >supports HTML5 video</a
          >
        </p>
      </video>    
    </div>
    <div style="width: 33%;height: 200px;">
        <video
        id="my-video2"
        class="video-js"
      >
        <!-- <source src="oceans.mp4" type="video/mp4" /> -->
        <p class="vjs-no-js">
          To view this video please enable JavaScript, and consider upgrading to a
          web browser that
          <a href="https://videojs.com/html5-video-support/" target="_blank"
            >supports HTML5 video</a
          >
        </p>
      </video>    
    </div>

  <script src="./video.min.js"></script>
  <script src="./jquery-3.3.1.min.js"></script>
  <script>
    var player = videojs('my-video', {
        autoplay: 'false',//any以流量器支持的方式自动播放
        muted:false,//设置true流量器才能自动播放，原因是浏览器新规则必须要用户与页面有交互后才能自动播放音视频
        controls: true,
        loop:true,
        preload:'metadata',//auto、metadata、、
        fluid:true,//自适应大小，true时width、height无用
        width: '500px',
        height: '400px',
        playbackRates: [0.5, 1, 1.5, 2],
        // poster: "Snipaste_2023-01-30_11-02-09.png",//预显示海报
        dataSetup: {
        
        },
        plugins: {
            // foo: {bar: true},
            // boo: {baz: false}
        }
    });
    var player2 = videojs('my-video2', {
        autoplay: 'any',//any以流量器支持的方式自动播放
        muted:false,//设置true流量器才能自动播放
        controls: true,
        loop:true,
        preload:'metadata',
        fluid:true,
        width: '500px',
        height: '400px',
        playbackRates: [0.5, 1, 1.5, 2],
        // poster: "Snipaste_2023-01-30_11-02-09.png",
        dataSetup: {

        },
        plugins: {
            // foo: {bar: true},
            // boo: {baz: false}
        }
    });
    player.src({type: 'video/mp4', src: 'oceans.mp4'}); //更新地址
    player2.src({src: 'V-143405-B7736A80.mp4'});
    player.ready(function() {
        // get
        var howLoudIsIt = player.volume();
        console.log(howLoudIsIt)
        // set
        player.volume(0.5); // Set volume to half
         //用户交互后才能自动播放音视频，任何点击都行，在play之前只要有交互就可以自动播放
        // player.play();
        // player.pause();
        setTimeout(()=>{
            player.pause();
            player.muted(false);
            console.log(player.currentTime())
            player.currentTime(10);//设置播放帧
        },1000)
    });
    // player.on('ended', function() {
    //     this.dispose(); //销毁
    // });
    
  </script>
</body>
</html>

资源打包下载：https://download.csdn.net/download/qq_42371913/87405871