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

最新推荐文章于 2024-08-15 17:40:17 发布

cnsummerLi

最新推荐文章于 2024-08-15 17:40:17 发布

阅读量1.9k

点赞数

本文链接：https://blog.csdn.net/qq_39689605/article/details/103044577

版权

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>