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中配置跨域，否则视频是无法播放的。

video.js播放视频相关推荐

vue开发移动端使用video.js播放视频
安装引入文档 HTML代码 css自定义播放按钮 css居中播放按钮 css设置简洁播放按钮 css设置海报占据整个视频空间 js使用设置 videojs设置中文销毁视频播放器实例使用html ...
关于video.js播放视频，设置视频铺满外围盒子
第一步:videojs 的options设置时,不指定width和height 第二步 :修改css 第三步:在创建player之前,把元素的padding-top设置成0px
video.js 播放流媒体
video.js 播放流媒体新人博主请多关照,若有侵权,联系改正.谢谢参考博客地址:https://www.cnblogs.com/FHC1994/p/9981440.html https:/ ...
video.js播放rtmp视频
最近公司要求拉取某公司流媒体服务器的视频监控,并在web端页面播放,流媒体服务器发送的是rtmp格式视频流,经过网上查资料,最后敲定使用video.js rtmp流需要依托flash播放,现在大多浏览 ...
html设置视频一直播放,设置video js多视频连续播放
设置video js多视频连续播放代码如下: var vList = ['http://vjs.zencdn.net/v/oceans.mp4', 'http://clips.vorwaerts-g ...
m3u8.php怎么调用,怎样使用Vue结合Video.js播放m3u8视频
这次给大家带来怎样使用Vue结合Video.js播放m3u8视频,使用Vue结合Video.js播放m3u8视频的注意事项有哪些,下面就是实战案例,一起来看一下. 首先,我们需要在vue工程中安装vi ...
Vue Video.js播放m3u8视频流格式（video+videojs-contrib-hl）
文章目录 1. Vue+Video.js播放效果图 2. npm安装和引入 3. vue 使用 4. 动态设置video视频的src地址 5. Uncaught (in promise) TypeEr ...
视频列表html页面,vue + video.js实现视频列表页（多个视频）
vue + video.js实现视频列表页 vue项目中做一个视频列表页,本来用原生video标签来实现,由于考虑到手机浏览器兼容问题,找了很多插件,最后决定用video.js这个插件来实现.Vide ...
异常：谷歌浏览器video标签播放视频不能拖动进度条
谷歌浏览器video标签播放视频不能拖动进度条当前端video的src不是直接使用视频文件的地址,而是通过后台下载接口返回文件流时,后台返回流因为没为response的header设置一些参数,会在 ...
video.js播放rtmp直播源和hls直播源
看了很多网上的坑,都是无法播放的,这次自己亲测能播放注意如果是自己制作的源的话,在推流之后要先等一小会才可以播放 video.js播放rtmp源一定要注意你的Chrome浏览器允许播放flash, ...

video.js播放视频

video.js播放视频

1、常用播放器

2、Video.js播放m3u8格式视频

3、总结

video.js播放视频相关推荐

最新文章

热门文章