学习视频处理（三），前端播放器

1、前端播放器选择

视频编码后要使用播放器对其进行解码、播放视频内容。在 web 应用中常用的播放器有 flash 播放器、 H5 播放器或

浏览器插件播放器，其中以 flash 和 H5 播放器最常见。

flash 播放器：缺点是需要在客户机安装 Adobe Flash Player 播放器，优点是 flflash 播放器已经很成熟了，并且浏览

器对 flflash 支持也很好。

H5 播放器：基于 h5 自带 video 标签进行构建，优点是大部分浏览器支持 H5 ，不用再安装第三方的 flflash 播放器，并

且随着前端技术的发展， h5 技术会越来越成熟。

本项目采用 H5 播放器，使用 Video.js 开源播放器。

Video.js 是一款基于 HTML5 世界的网络视频播放器。它支持 HTML5 和 Flash 视频，它支持在台式机和移动设备上播

放视频。这个项目于 2010 年中开始，目前已在 40 万网站使用。

官方地址： http://videojs.com/

2、下载video.js

Video.js ： https://github.com/videojs/video.js

videojs-contrib-hls ： https://github.com/videojs/videojs-contrib-hls#installation

（ videojs-contrib-hls 是播放 hls 的一个插件）

使用文档： http://docs.videojs.com/tutorial-videojs_.html

本教程使用 video.js 6.7.3 版本， videojs-contrib-hls 5.14.1 版本。

下载上边两个文件，为了测试需求将其放在门户的 plugins 目录中。

3、测试video.js

参考 https://github.com/videojs/videojs-contrib-hls#installation

官方文档： https://docs.videojs.com/

1 、编写测试页面 video.html 。

<!DOCTYPE html>
<html lang="en">
<head><meta http-equiv="content-type" content="text/html; charset=utf-8" /><title>视频播放</title><link href="/plugins/videojs/video-js.css" rel="stylesheet">
</head>
<body>
<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><input type="button" onClick="switchvideo()" value="switch"/><script src="/plugins/videojs/video.js"></script>
<script src="/plugins/videojs/videojs-contrib-hls.js"></script>
<script>var player = videojs('example-video');//player.play();function switchvideo(){player.src({src:  'http://vjs.zencdn.net/v/oceans.mp4',type: 'application/x-mpegURL',withCredentials: true});player.play();}
</script></body>
</html>

学习视频处理（三），前端播放器相关推荐

开发那些事儿：在Flv.js前端播放器中解析并绘制H.264编码中的SEI信息
流媒体中的SEI是指补充增强信息(Supplemental Enhancement Information),它提供了向视频码流中加入信息的办法,是H.264/H.265视频压缩标准的特性之一.SEI ...
如何打造支撑多种视频播放诉求的大前端播放器？
VideoX 是内容前端团队基于电商业务(以下简称大淘宝)背景打造的面向大终端场景的前端播放器.这篇文章谈谈我对播放器领域问题的认识,以及当下解决这些问题的思路. 大淘宝视频播放的场景有哪些? 大淘宝 ...
Android学习之路4——音乐播放器后台播放
Android学习之路4--音乐播放器后台播放一.实验题目简单音乐播放器二.实现内容实现一个简单的播放器,要求功能有: 播放.暂停.停止.退出功能,按停止键会重置封面转角,进度条和播放按钮:按 ...
视频云：点播播放器和直播播放器冲突如何解决?
1.问题开发者有点播和直播都需要用,既有播放网络视频的需求也有直播播放视频流的需求,这个时候如果用户先集成了点播播放器再去集成直播播放器的时候会出现冲突报错. 2.解决方案开发者仅仅使用直播播放器 ...
ckplayer解析php源码,zblogphp视频主题使用ckplayer播放器说明
zblog视频主题最新升级版中内置了ckplayer播放器,本文要详细说明下ckplayer播放器的使用方法. 事先声明: 主题内置的"ckplayer播放器"仅为最基本的网页播放 ...
网页上播放视频的免费的播放器_CKPlayer
今天在工作的过程中遇到一个功能:在网页中加入视频播放器,类似于我们经常看到的优酷,爱奇艺等视频网站的功能. ckplayer(官网:http://www.ckplayer.com/)是一款在网页上播放 ...
DASH视频系统（服务器播放器）搭建
文章目录 0. 概述 1. 搭建服务器(Nginx) 2. 获取源视频及音频 3. 安装编码器(FFmpeg) 4. 视频编码 5. 音频编码 6. 安装视频切片工具(Bento4) 7. 视频切片 ...
C#学习 winform实现简单音乐播放器
C#学习 winform实现简单音乐播放器窗体设计代码实现 using System; using System.Collections.Generic; using System.Compone ...
PHP实现使用优酷土豆视频地址获取swf播放器分享地址
这篇文章主要介绍了PHP实现使用优酷土豆视频地址获取swf播放器分享地址,即分析优酷土豆的视频页面地址,从而获得对应的swf播放器分享地址,需要的朋友可以参考下项目用到临时写的.待完善: 复制代码代 ...

学习视频处理（三），前端播放器

学习视频处理（三），前端播放器相关推荐

最新文章

热门文章