H5播放HLS之videojs播放视频

最新推荐文章于 2024-06-16 15:54:56 发布

贝壳里的沙

最新推荐文章于 2024-06-16 15:54:56 发布

阅读量5.7k

点赞数 1

分类专栏： HTML 视频编解码视频采集文章标签：音视频编解码 H5

本文链接：https://blog.csdn.net/lixiang987654321/article/details/108713806

版权

视频编解码同时被 3 个专栏收录

19 篇文章 4 订阅

订阅专栏

HTML

14 篇文章 0 订阅

订阅专栏

视频采集

1 篇文章 0 订阅

订阅专栏

一、简介

如果要让网页支持在所有浏览器上播放，就需要使用第三方的播放器。VideoJs是一个较好的播放器库，完全免费，不像JWPlayer一样需要付费才能使用一些高级功能。

videojs播放库是比较有名的一个播放库，它不仅支持hls也支持rtmp，不过如果是播放rtmp它最终也是通过flash插件完成的，我们暂时只看hls。

二、实现

如果使用videojs播放hls前端代码实现如下：

<!DOCTYPE html>
<html lang="en">
	<head>
	    <meta charset="UTF-8">
	    <title>Title</title>
	    <link href="https://vjs.zencdn.net/7.6.6/video-js.css" rel="stylesheet" />
	    <!-- If you'd like to support IE8 (for Video.js versions prior to v7) -->
	    <script src="https://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script>
	</head>
	<body>
		<video
		        id="my-video"
		        class="video-js  vjs-big-play-centered"
		        controls
		        preload="auto"
		        width="640"
		        height="264"
		        data-setup="{}">
		    <source src="http://192.168.12.187:8080/live/1.m3u8" type="application/x-mpegURL"/>
		    <p class="vjs-no-js">
		       	 请升级您的浏览器之后在看该视频!
		        <a href="https://videojs.com/html5-video-support/" target="_blank">支持H5视频标签</a>
		    </p>
		</video>
		<script src="https://vjs.zencdn.net/7.6.6/video.js"></script>
	</body>
</html>

经过测试videojs播放HLS延迟大概在8s左右，不过也是非常的流畅，如果要定制自己的播放器可以参考如下代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>videojs自定义播放器</title>
    <link href="./css/bootstrap.min.css" rel="stylesheet">
    <script type="text/javascript" src="./js/jquery.min.js"></script>
    <link href="./videojs/video-js.css" rel="stylesheet">
    <script src="./videojs/video.js"></script>
    <script src="./videojs/videojs-contrib-hls.min.js"></script>
</head>

<body>
    <center>
        <video id=example-video width=600 height=300 class="video-js vjs-default-skin" controls>

        </video>
        <div class="input-group" style="margin-top: 10px; width: 740px;">
            <input type="text" name="stream_address" id="stream_address" required autofocus
                placeholder="input HLS Stream Address 注意不要含有空格" class="form-control">
            <span class="input-group-btn input-btn">
                <button class="btn btn-default" id="form_button" type="button">提交</button>
            </span>
        </div>
    </center>
    <script type="text/javascript">
        var default_hls_address = 'http://192.168.12.187:8080/live/1.m3u8';
        var options = {
            width: 1280,
            height: 720,
            poster: "../image/video-background.jpg",
            autoplay: true,
            controls: true,
            loop: true,
            preload: 'auto',
            sourceOrder: true,
            sources: [{
                src: default_hls_address,
                type: 'application/x-mpegURL'
            }, {
                src: '//path/to/video.webm',
                type: 'video/webm'
            }],
            techOrder: ['html5', 'flash'],
            flash: {
                swf: 'videojs/video-js.swf'
            }
        }
        var player = videojs('example-video', options);
        player.addClass('vjs-matrix');
        player.on(['loadstart', 'play', 'playing', 'firstplay', 'pause', 'ended', 'adplay', 'adplaying', 'adfirstplay', 'adpause', 'adended', 'contentplay', 'contentplaying', 'contentfirstplay', 'contentpause', 'contentended', 'contentupdate'], function (e) {
            //        console.warn('VIDEOJS player event: ', e.type);
            if (e.type == "play") {
                console.log('开始播放');
            } else if (e.type == "playing") {
                console.log('正在播放...');
            } else if (e.type == "pause") {
                console.log('暂停视频播放');
            } else if (e.type == "firstplay") {
                console.log('firstplay播放');
            } else {
                console.log('1111111111111');
            }
        });
        $(function () {
            $("#form_button").click(function () {
                var msg = $("#msg");
                stream_address = $('input[name="stream_address"] ').val();
                console.log(stream_address);
                if (stream_address == "") {
                    $('#stream_address ').css("border", "1px #ff0000 solid");
                    msg.text("请输入媒体流地址");
                    msg.addClass("warning");
                    return false;
                } else {
                    $('#stream_address').css("border", "1px #ff00ff solid");
                    msg.text("error");
                    msg.removeClass("warning");
                }
                $('#stream_address_code ').html("\"" + stream_address + "\"");
                player.src({
                    src: stream_address,
                    type: "application/x-mpegURL"
                });
            });
        });
        console.log(stream_address);
    </script>
</body>
</html>

源码获取、合作、技术交流请获取如下联系方式：
QQ交流群：961179337
在这里插入图片描述

微信账号：lixiang6153
公众号：IT技术快餐
电子邮箱：lixx2048@163.com

贝壳里的沙

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
0
评论
H5播放HLS之videojs播放视频

一、简介如果要让网页支持在所有浏览器上播放，就需要使用第三方的播放器。VideoJs是一个较好的播放器库，完全免费，不像JWPlayer一样需要付费才能使用一些高级功能。videojs播放库是比较有名的一个播放库，它不仅支持hls也支持rtmp，不过如果是播放rtmp它最终也是通过flash插件完成的，我们暂时只看hls。二、实现如果使用videojs播放hls前端代码实现如下：<!DOCTYPE html><html lang="en"> <head>
复制链接

扫一扫