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

引用videojs API
中文文档详解

  1. 第一步引用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>
  1. 写你的视频标签
//使用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,
	// 更多好玩的配置等你来发掘.....
});

常用事件

  1. 播放 this.play()
  2. 停止 – video没有stop方法,可以用pause 暂停获得同样的效果
  3. 暂停 this.pause()
  4. 销毁 this.dispose()
  5. 监听 this.on(‘click‘,fn)
  6. 触发事件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.csdn.net/a0405221/article/details/80923090
https://github.com/videojs/video.js/releases
http://xieze.gitee.io/videojs/
https://gitee.com/xieze/videojs

发布了96 篇原创文章 · 获赞 12 · 访问量 8万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 技术黑板 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览