HTML5 Video Programming

2024-03-07 21:20:21

视频学习地址：https://www.youtube.com/playlist?list=PLSkTiyK6-uFd85cPVw6RcXn9MFNwms6L3

video.js

video.js就是一个javascript视频库
官网：https://videojs.com/ https://videojs.com/getting-started
github：https://github.com/videojs/video.js

video.js插件
官网：https://videojs.com/plugins
github：https://github.com/videojs/video.js/wiki/Plugins

node.js

一个运行html文件的环境，好比py文件需要python环境
npm：node.js的包管理器

cd跳转到工作目录
npm install package安装js包

安装js包

对于videojs-playlist这个包，我之前以为直接去github里面复制一下就好了，但没想到与官网的不一样，通过官网提供的github进去又找不到videojs-playlist.js，因此只好用npm安装。
<script src="path/to/videojs-playlist/dist/videojs-playlist.js"></script>
根据官网的提示在dist文件夹中找到video-playlist.js，复制到工作文件夹即可

不用video.js

有很多视频包，比如video.js，plyr.js等，不用这些也可以播放视频。但视频包里面有很多现成功能可以直接用，而且好看。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>video programming</title>
</head>

<body>
	<video width="320" height="240" autoplay muted controls>
	  <source src="国产凌凌漆.mkv" type="video/webm" />
	  Your browser does not support video tag
	</video>
</body>
</html>

在console中可以执行以下命令：
video = document.querySelector(‘video’);
video.play();
video.playbackRate=5.0; 快进5倍速
video.pause();
video.currentTime; 当前播放进度的时间秒
video.currentTime=10; 将播放进度时间设为10s
video.volume = 0.5;

cdn链接

video.js提供cdn链接，因此只需复制链接地址即可，而不需要将整个js文件都复制过来。

初步使用video.js

通过cdn链接使用video.js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>video programming</title>
	<link href="https://vjs.zencdn.net/7.11.4/video-js.css" rel="stylesheet" />
</head>

<body>
	<video 
	id="my-video"
    class="video-js"
	muted controls
	poster="Money.jpg"
	data-setup="{}"
	>
		<source src="国产凌凌漆.mkv" type="video/webm" />
		<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>
	<script src="https://vjs.zencdn.net/7.11.4/video.js"></script>
</body>
</html>

添加class=“video-js vjs-big-play-centered”，则播放按钮置于中间

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>video programming</title>
	<link href="https://vjs.zencdn.net/7.11.4/video-js.css" rel="stylesheet" />
</head>

<body>
	<video 
	id="my-video"
    class="video-js vjs-big-play-centered"
	muted controls
	poster="Money.jpg"
	data-setup="{}"
	>
		<source src="国产凌凌漆.mkv" type="video/webm" />
		<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>
	<script src="https://vjs.zencdn.net/7.11.4/video.js"></script>
</body>
</html>

在console中可以执行以下命令：
var video = videojs(‘my-video’); 通过id选择
video.play();
以及前面的暂停、播放速率等等

增加快进以及键盘操纵功能

增加快进按钮

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>video programming</title>
	<link href="https://vjs.zencdn.net/7.11.4/video-js.css" rel="stylesheet" />
</head>

<body>
	<video 
	id="my-video"
    class="video-js vjs-big-play-centered"
	data-setup="{}"
	>
		<source src="国产凌凌漆.mkv" type="video/webm" />
		<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>
	<script src="https://vjs.zencdn.net/7.11.4/video.js"></script>
	<script type="text/javascript" src="video-player.js"></script>
</body>
</html>

video-player.js

var player = videojs('my-video',{
	autoplay:'muted',
	controls:true,
	poster:"Money.jpg",
	loop:true,
	fluid:true,
	aspectRatio:'4:3',
	playbackRates:[0.25,0.5,1,1.5,2,2.5,3,3.5,4],
	userActions:{
		hotkeys:true
	}
});

添加插件hotkeys.js，增加数字操纵快进功能

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>video programming</title>
	<link href="https://vjs.zencdn.net/7.11.4/video-js.css" rel="stylesheet" />
</head>

<body>
	<video 
	id="my-video"
    class="video-js vjs-big-play-centered"
	data-setup="{}"
	>
		<source src="国产凌凌漆.mkv" type="video/webm" />
		<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>
	<script src="https://vjs.zencdn.net/7.11.4/video.js"></script>
	<script src="https://cdn.sc.gl/videojs-hotkeys/0.2/videojs.hotkeys.min.js"></script>
	<script type="text/javascript" src="video-player.js"></script>
</body>
</html>

video-player.js

var player = videojs('my-video',{
	autoplay:'muted',
	controls:true,
	poster:"Money.jpg",
	loop:true,
	playbackRates:[0.25,0.5,1,1.5,2,2.5,3,3.5,4],
	plugins:{
		hotkeys:{
			enableModifiersForNumber:false,
			seekStep:10
		}
	}
});

增加旋转、视频缩略图、水印、自动播放下一个电影功能

需要插件
这三个插件通过复制获得
zoomrotate.js
https://github.com/xbgmsharp/videojs-rotatezoom/blob/master/src/videojs.zoomrotate.js
watermark.js
https://github.com/xbgmsharp/videojs-watermark/blob/master/src/videojs.watermark.js
thumbnails.js
https://github.com/brightcove/videojs-thumbnails/blob/master/videojs.thumbnails.js
这个插件通过npm安装获得，因为这个插件在github找不到
playlist.js
总之你需要什么插件在github与官网都可找到

将这四个插件复制到工作目录

playlist需要关掉loop，因此我设loop为false

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>video programming</title>
	<link href="https://vjs.zencdn.net/7.11.4/video-js.css" rel="stylesheet" />
	<link href="thumbnails.css" rel="stylesheet" />
</head>

<body>
	<video 
	id="my-video"
    class="video-js vjs-big-play-centered"
	>
		<source src="国产凌凌漆.mkv" type="video/webm" />
		<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>
	<script src="https://vjs.zencdn.net/7.11.4/video.js"></script>
	<script src="https://cdn.sc.gl/videojs-hotkeys/0.2/videojs.hotkeys.min.js"></script>
	
	<script type="text/javascript" src="zoomrotate.js"></script>
	<script type="text/javascript" src="watermark.js"></script>
	<script type="text/javascript" src="thumbnails.js"></script>
	<script type="text/javascript" src="playlist.js"></script>
	
	<script type="text/javascript" src="video-player.js"></script>
	
</body>
</html>

video-player.js

var player = videojs('my-video',{
	autoplay:'muted',
	controls:true,
	poster:"Money.jpg",
	loop:false,
	playbackRates:[0.25,0.5,1,1.5,2,2.5,3,3.5,4],
	plugins:{
		hotkeys:{
			enableModifiersForNumber:false,
			seekStep:10
		}
	}
});

player.zoomrotate({
	rotate:180,
	zoom:1
});

player.watermark({
	file:'水印.jpg',
	xpos:0,
	ypos:0,
	opacity:0.6,
	clickable:true,
	url:'https://gitee.com/leslielee_619'
});

player.thumbnails({
	0:{
		src:'pic1.jpg',
	},
	1800:{
		src:'pic2.jpg',
	}
});

player.playlist([{
  sources: [{
    src: '国产凌凌漆.mkv',
    type: 'video/webm'
  }],
  poster: 'Money.jpg'
}, {
  sources: [{
    src: '站台.mkv',
    type: 'video/webm'
  }],
  poster: 'Platform.jpg'
}, {
  sources: [{
    src: '国产凌凌漆.mkv',
    type: 'video/webm'
  }],
  poster: 'Money.jpg'
}]);

// Play through the playlist automatically.
player.playlist.autoadvance(0);

增加按钮旋转功能

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>video programming</title>
	<link href="https://vjs.zencdn.net/7.11.4/video-js.css" rel="stylesheet" />
	<link href="thumbnails.css" rel="stylesheet" />
</head>

<body>
	<video 
	id="my-video"
    class="video-js vjs-big-play-centered"
	>
		<source src="国产凌凌漆.mkv" type="video/webm" />
		<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>
	<script src="https://vjs.zencdn.net/7.11.4/video.js"></script>
	<script src="https://cdn.sc.gl/videojs-hotkeys/0.2/videojs.hotkeys.min.js"></script>
	
	<script type="text/javascript" src="zoomrotate.js"></script>
	<script type="text/javascript" src="watermark.js"></script>
	<script type="text/javascript" src="thumbnails.js"></script>
	<script type="text/javascript" src="playlist.js"></script>
	
	<script type="text/javascript" src="rotate.js"></script>
	
	<script type="text/javascript" src="video-player.js"></script>
	
</body>
</html>

video-player.js

var player = videojs('my-video',{
	autoplay:'muted',
	controls:true,
	poster:"Money.jpg",
	loop:false,
	playbackRates:[0.25,0.5,1,1.5,2,2.5,3,3.5,4],
	plugins:{
		hotkeys:{
			enableModifiersForNumber:false,
			seekStep:10
		}
	}
});

player.watermark({
	file:'水印.jpg',
	xpos:0,
	ypos:0,
	opacity:0.6,
	clickable:true,
	url:'https://gitee.com/leslielee_619'
});

player.thumbnails({
	0:{
		src:'pic1.jpg',
	},
	1800:{
		src:'pic2.jpg',
	}
});

player.playlist([{
  sources: [{
    src: '国产凌凌漆.mkv',
    type: 'video/webm'
  }],
  poster: 'Money.jpg'
}, {
  sources: [{
    src: '站台.mkv',
    type: 'video/webm'
  }],
  poster: 'Platform.jpg'
}, {
  sources: [{
    src: '国产凌凌漆.mkv',
    type: 'video/webm'
  }],
  poster: 'Money.jpg'
}]);

// Play through the playlist automatically.
player.playlist.autoadvance(0);

player.rotate(player);

rotate.js

function rotate(player){
	var dimension = 0;
	
	var rotateLeftButton = creatButton('&#8635;');
	var rotateRightButton = creatButton('&#8634;');
	
	rotateLeftButton.onclick = function(){
		dimension += 90;
		dimension %= 360;
		player.zoomrotate({rotate: dimension});
	};
	
	rotateRightButton.onclick = function(){
		dimension -= 90;
		if(Math.abs(dimension)==360){
			dimension = 0;
		}
		player.zoomrotate({rotate: dimension});
	};
	
	var playbackRate = document.querySelector('.vjs-playback-rate');
	insertAfter(rotateLeftButton, playbackRate);
	insertAfter(rotateRightButton, rotateLeftButton);
	
	function creatButton(icon){
		var button = document.createElement('button');
		button.classList.add('vjs-menu-button');
		button.innerHTML = icon; //'&#8635'
		button.style.fontsize = '1.8em';
		return button;
	};
	
	function insertAfter(newEl, element){
		element.parentNode.insertBefore(newEl, element.nextSibling);
	};
};

videojs.registerPlugin('rotate', rotate);

至此自己写了一个html与两个js，用到了video.js及其五个插件

码农公寓

video.js

node.js

安装js包

不用video.js

cdn链接

初步使用video.js

增加快进以及键盘操纵功能

增加旋转、视频缩略图、水印、自动播放下一个电影功能

增加按钮旋转功能

相关文章