html视频播放禁止播放进度条

最新推荐文章于 2025-06-27 11:12:01 发布

转载最新推荐文章于 2025-06-27 11:12:01 发布 · 1w 阅读

JavaScript 同时被 2 个专栏收录

35 篇文章

订阅专栏

html+css

12 篇文章

订阅专栏

本文详细介绍了video.js API的使用方法，包括如何引入API、设置视频标签、配置播放器属性及常见事件处理。通过示例代码展示了如何创建、配置和控制video.js播放器，为开发者提供了实用的参考。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

引用videojs API
中文文档详解

第一步引用API

<link href="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.3.0/video-js.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.3.0/video.min.js"></script>

写你的视频标签

//使用video标签
<video id="example_video_1" class="video-js vjs-default-skin" controls preload="none" width="640" height="264"
         poster="http://vjs.zencdn.net/v/oceans.png">
    <source src="http://vjs.zencdn.net/v/oceans.mp4" type="video/mp4">
</video>

开启你的videojs使用
controls : true/false,

var player = videojs('example_video_1',{
    muted: true,
	controls : false,  
	height:300, 
	width:300,
	loop : true,
	// 更多好玩的配置等你来发掘.....
});

常用事件

播放 this.play()
停止 – video没有stop方法，可以用pause 暂停获得同样的效果
暂停 this.pause()
销毁 this.dispose()
监听 this.on(‘click‘,fn)
触发事件this.trigger(‘dispose‘)

var options = {};
 
var player = videojs('example_video_1', options, function onPlayerReady() {
  videojs.log('播放器已经准备好了!');
 
  // In this context, `this` is the player that was created by Video.js.<br>  // 注意，这个地方的上下文， `this` 指向的是Video.js的实例对像player
  this.play();
 
  // How about an event listener?<br>  // 如何使用事件监听？
  this.on('ended', function() {
    videojs.log('播放结束了!');
  });
});

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>videojs视频播放DEMO</title>
</head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.3.0/video-js.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.3.0/video.min.js"></script>
<body>
  <h3>视频播放</h3>
  <video id="example_video_1" class="video-js vjs-default-skin" controls preload="none" poster="http://vjs.zencdn.net/v/oceans.png">
    <source src="http://pjx3oqgpd.bkt.clouddn.com/01%E3%80%81%E4%BF%9D%E5%B1%B1%E5%B8%82%E7%A6%81%E6%AF%92%E5%8A%9E%E3%80%8A%E9%A3%8E%E9%9B%A8%E6%97%A0%E6%82%94%E3%80%8B.mp4" type="video/mp4">
  </video>
</body>
</html>
<script>
  var player = videojs('example_video_1', {
    muted: true,  //是否静音
    // controls: false,
    controls: true,   // 进度条是否显示
    height: 300,    
    width: 400,
    loop: true,      //播放完是否循环播放
    // autoplay : true,   // 是否自动播放
    // 更多配置.....
  });
</script>

下载 DEMO
https://gitee.com/jixiaoliang/video_playback_of_videojs/tree/master/vide7.1.0

解决了吗?
附上几篇文档
http://www.jq22.com/jquery-info404
http://docs.videojs.com/index.html
https://blog.youkuaiyun.com/a0405221/article/details/80923090
https://github.com/videojs/video.js/releases
http://xieze.gitee.io/videojs/
https://gitee.com/xieze/videojs