videojs

来源:简书 分类: 文章浏览史 发布时间:2021-10-20 11:30:14 最后更新:2021-10-20 浏览:88
转载声明:
本文为摘录自“简书”,版权归原作者所有。
温馨提示:
为了更好的体验,请点击原文链接进行浏览
摘录时间:
2021-10-20 11:30:14

videojs

videojs官方文档
引入css和js可直接对页面中所有video生效

配置属性
  • 直接在html的video标签中加入data-setup属性配置属性
  • 通过videojs()方法传入video元素或其id,初始化并配置属性
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>videojs</title>
  <link href="https://vjs.zencdn.net/7.10.2/video-js.css" rel="stylesheet" />
</head>

<body>
  <video id="my-video" class="video-js" data-setup='{"height":"300","width":"300"}'>
    <!-- <source src="test.mp4" type="video/mp4" /> -->
    <p class="vjs-no-js">
      please enable JavaScript
    </p>
  </video>
  <div id="btn" onclick="clickMe()">clickme</div>
</body>
<script src="https://vjs.zencdn.net/7.10.2/video.min.js"></script>

<script>


  videojs.options.autoplay = true;//全局配置
  var myPlayer = videojs('my-video', {
    //video原有基础属性/标签 
    muted: true,
    controls: true,
    loop: false,
    autoplay: false,
    sources: [{
      src: "test.mp4", type: "video/mp4"
    }],
    //videojs新增属性
    // aspectRatio:"10:1",//长宽比(优先级高于宽高属性)
    playbackRates: [0.5, 1, 1.5, 3],//可选播放速度
    // fluid:true,
  },
    function onPlayerReady() {
      console.log("muted", this.muted());
      this.muted(false);

      this.volume(0.5);//调整音量 0~1
      this.play();
      videojs.log("播放开始了1!");
    });

  //改变播放内容
  myPlayer.src({ type: 'video/mp4', src: 'http://www.example.com/path/to/video.mp4' });


  videojs.getPlayer(document.getElementById('my-video')).on("ended", function () {
    videojs.log("播放结束了1!");
  });
  videojs.getPlayer('my-video').on("ended", function () {
    videojs.log("播放结束了2!");
    this.dispose();//销毁该实例,解除所有绑定事件并移除对应video元素
    console.log("是否已销毁", this.isDisposed());
  });
  videojs.getPlayers()['my-video'].ready(function () {
    videojs.log("播放开始了2!");
    console.log("isFullscreen", myPlayer.isFullscreen());
  });


  function clickMe() {//requestFullscreen需要user gesture之后才能触发
    console.log("isFullscreen", myPlayer.isFullscreen());
    // document.documentElement.requestFullscreen();
    myPlayer.requestFullscreen();

    setTimeout(() => {//3秒后退出全屏
      document.exitFullscreen();
    }, 3000);
  };

</script>

</html>

php技术微信