plyr音视频播放插件使用示例

<!DOCTYPE html>
<html>
    <head>
    <meta charset="UTF-8" />
    <title>plyr demo</title>
    
    <script src="https://cdn.plyr.io/3.6.12/plyr.js"></script>
    <link rel="stylesheet" href="https://cdn.plyr.io/3.6.12/plyr.css" />

</head>

<body>
  
  <script>
  window.onload = function(){
    const player = new Plyr('#player');  
    player.volume=0;  //静音允许自动播放
    player.play();
    //player.volume=0.5;  //手动设置音量
  }

  </script>

  <video id="player"  controls  >  <!--  playsinline data-poster="/path/to/poster.jpg"   -->
  <source src="D:/mv/孤勇者.mp4" type="video/mp4" />
  <!-- <source src="/path/to/video.webm" type="video/webm" />  -->

  <!-- Captions are optional -->
  <!-- <track kind="captions" label="English captions" src="/path/to/captions.vtt" srclang="en" default />  -->
   </video>
 
</body>
</html>

参考文档

https://mp.weixin.qq.com/s/ctEgJ8u7eh3wi8jMAy5rJw

最近更新

  1. TCP协议是安全的吗?

    2024-06-19 07:42:04       14 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2024-06-19 07:42:04       16 阅读
  3. 【Python教程】压缩PDF文件大小

    2024-06-19 07:42:04       15 阅读
  4. 通过文章id递归查询所有评论(xml)

    2024-06-19 07:42:04       18 阅读

热门阅读

  1. Distributed Systems Semester Project

    2024-06-19 07:42:04       6 阅读
  2. 标题:高考后的抉择:专业优先还是学校优先?

    2024-06-19 07:42:04       7 阅读
  3. 关于vue elementUi校验slot插槽中的表单项

    2024-06-19 07:42:04       7 阅读
  4. 编程用什么电脑不卡的:深度解析与推荐

    2024-06-19 07:42:04       6 阅读
  5. 代码随想录算法训练营第十二天

    2024-06-19 07:42:04       6 阅读
  6. CSS选择器

    2024-06-19 07:42:04       8 阅读
  7. lspci总结

    2024-06-19 07:42:04       5 阅读
  8. 实现ROS中两个里程计数据的转换到同一坐标系下

    2024-06-19 07:42:04       9 阅读
  9. 基础语法总结 —— Python篇

    2024-06-19 07:42:04       5 阅读