video.js播放视频
1、常用播放器
视频编码后要使用播放器对其进行解码、播放视频内容。在web应用中常用的播放器有flash播放器、H5播放器或浏览器插件播放器,其中以flash和H5播放器最常见。
flash播放器
缺点是需要在客户机安装Adobe Flash Player播放器,优点是flash播放器已经很成熟了,并且浏览器对flash支持也很好。
H5播放器
基于h5自带video标签进行构建,优点是大部分浏览器支持H5,不用再安装第三方的flash播放器,并且随着前端技术的发展,h5技术会越来越成熟。通常会使用Video.js开源播放器。
2、Video.js播放m3u8格式视频
Video.js是一款基于HTML5世界的网络视频播放器。它支持HTML5和Flash视频,它支持在台式机和移动设备上播放视频。这个项目于2010年中开始,目前已在40万网站使用。
下面通过一个例子在页面中使用video.js来播放视频。
(1)下载video.js
可以去官网下载video.js,一般是需要下载video-js.css、video.js、videojs-contrib-hls.js这3个,如下:
我已经下载好了,放在plugins这个目录里了。
(2)搭建Nginx媒体服务器
正常使用video.js播放视频是通过一个网页,用户通过浏览器打开网页去播放视频,网页和视频都从web服务器请求,通常视频的url地址使用单独的域名。
以下通过nginx虚拟主机来配置:
# 媒体服务
upstream video_server{
server 127.0.0.1:95 weight=10;
}
## 模拟主页
server {
listen 80;
server_name www.ycz.com;
location / {
alias F:/Users/Administrator/Desktop/video/;
index index.html;
}
}
## 媒体服务代理
server {
listen 80;
server_name video.play.com;
location /video {
proxy_pass http://video_server;
add_header Access-Control-Allow-Origin *;
add_header Access-Control-Allow-Credentials true;
add_header Access-Control-Allow-Methods GET;
}
}
## 媒体服务
server {
listen 95;
server_name localhost;
## 视频目录
location /video/ {
alias E:/video/;
}
}
以上配置了2个域名,因为是在本机,所以需要修改HOST文件,如下:
这个文件在系统盘下的 /Windows/System32/Drivers/etc下,添加以下内容:
说明:当用户访问www.ycz.com时,实际上是访问F:/Users/Administrator/Desktop/video/这里,这个video目录假设是一个前端工程的目录:
很简单,就一个plugins目录,里面存放的是与video.js相关的文件,然后index.html假设是工程的主页:
也就是说,当在浏览器中输入www.ycz.com时,访问的是F:/Users/Administrator/Desktop/video/index.html页面,这是以下配置的说明:
现在我在浏览器中测试:
媒体服务代理说明
(这里一定要开启跨域,这很重要,就是上面圈出的地方。)这是一个媒体服务的代理,当用户输入的路径是video.play.com/video/**时,会转发到video_server这个服务,该服务即是媒体服务,如下:
这个是本机的95端口。媒体服务如下:
当用户的请求是video.play.com/video/*时,实际上访问的是E:/video/ *。
E:/video这个目录如下:
这实际上是一个专门用来存放视频文件的目录,等一下会播放hls里面的m3u8文件,如下:
这个视频已经转换成了m3u8文件,并且切好了ts片。
(3)播放页面
播放页面在这个目录下:
如图,就是video.html,这个页面内容如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>视频播放测试</title>
<!--引入video-js.css-->
<link rel="stylesheet" href="/plugins/video-js.css">
</head>
<body>
<!--视频播放标签-->
<video id="example-video" width="800" height="600"
class="video-js vjs-default-skin vjs-big-play-centered"
controls poster="">
<source src="http://video.play.com/video/hls/无上神帝01.m3u8"
type="application/x-mpegURL">
</video>
<!--按钮-->
<input type="button" onClick="switchvideo()" value="switch"/>
<!--引入video.js文件-->
<script src="/plugins/video.js"></script>
<!--引入插件-->
<script src="/plugins/videojs-contrib-hls.js"></script>
<script>
//获取player对象
var player = videojs('example-video');
function switchvideo(){
player.src({
src: "http://video.play.com/video/hls/无上神帝01.m3u8",
type: "application/x-mpegURL",
withCredentials: true
});
player.play();
}
</script>
</body>
</html>
(4)测试视频播放
浏览器中输入: www.ycz.com/video.html。
点击这个播放按钮:
视频播放了,可以快进后退:
点击双竖线可以控制播放、暂停。喇叭图案是调节声音大小。右下角的小正方形是全屏播放。下面的switch按钮是切换视频。
说明:用户访问http://www.ycz.com/video.html时,实际上是访问F:/Users/Administrator/Desktop/video/video.html这个播放页面,然后这个播放页面中有一个url:
播放页面中会请求http://video.play.com/video/hls/无上神帝01.m3u8这个url,实际上会将请求转发到:E:/video/hls/无上神帝01.m3u8,也就是访问本机上的这个m3u8视频文件:
点击播放,即可实现m3u8视频文件的播放。
3、总结
在h5页面中,可以直接使用video.js来播放视频,非常方便。注意的是一定要解决跨域的问题,像上面的在Nginx中配置跨域,否则视频是无法播放的。