【视频直播篇六】videojs的使用

本文涉及的产品
视频直播,500GB 1个月
播放器SDK+直播LIVE组合试用套餐,播放器+流量+转码 1个月
播放器SDK+超低延时直播RTS组合试用套餐,播放器+流量+转码 1个月
简介: 本文着重介绍videojs的使用
前言

这个视频直播出了一个系列,以下文章是几个播放器的使用教程

正文
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>video.js播放rtmp流</title>
    <link href="//vjs.zencdn.net/7.10.2/video-js.min.css" rel="stylesheet">
    <script src="//vjs.zencdn.net/7.10.2/video.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/videojs-flash@2/dist/videojs-flash.min.js"></script>

</head>
<body>
<!--vjs-big-play-centered 播放按钮居中-->
<!--poster默认的显示界面,就是还没点播放,给你显示的界面-->
<!--controls 规定浏览器应该为视频提供播放控件-->
<!--preload="auto" 是否提前加载-->
<!--autoplay 自动播放-->
<!--loop=true 自动循环-->
<!--data-setup='{"example_option":true}' 可以把一些属性写到这个里面来,如data-setup={"autoplay":true}-->
<video style="width:100%;min-width:40vw;height:560px;"
        id="my-player"
        class="video-js"
        controls
        preload="auto"
        poster="//vjs.zencdn.net/v/oceans.png"
        data-setup='{}'>
    <source src="//vjs.zencdn.net/v/oceans.mp4" type="video/mp4"></source>
    <!--<source src="//vjs.zencdn.net/v/oceans.webm" type="video/webm"></source>
    <source src="//vjs.zencdn.net/v/oceans.ogv" type="video/ogg"></source>
    <source src="rtmp://58.200.131.2:1935/livetv/hunantv" type="rtmp/flv"></source>-->
    <p class="vjs-no-js">
        To view this video please enable JavaScript, and consider upgrading to a
        web browser that
        <a href="https://videojs.com/html5-video-support/" target="_blank">
            supports HTML5 video
        </a>
    </p>
</video>


<script type="text/javascript">
    var options = {
    };

    var player = videojs('my-player', options, function onPlayerReady() {
    
        videojs.log('Your player is ready!');

        // In this context, `this` is the player that was created by Video.js.
        this.play();

        // How about an event listener?
        this.on('ended', function() {
    
            videojs.log('Awww...over so soon?!');
        });
    });

    player.play();
    //    1. 播放   player.play()
    //    2. 停止   player.pause()
    //    3. 暂停   player.pause()

</script>
</body>
</html>
相关文章
|
Web App开发 移动开发 JavaScript
【视频直播篇一】入门篇
公司产品要集成视频直播,原来找的一家第三方厂家已经对接好了,后来领导说成本太高要换。拿到同行的产品来看,发现他们用的是rtmp协议的直播流。领导说要上这个,把这个任务交给我,当时都蒙圈了。这啥玩意?!从来没见过啊。领导的话就是命令,没办法,硬着头皮也要上。 花了几天时间稍微入了门,在这里总结一下。 首先直播中有两个非常重要的概念:推流、拉流。通俗来讲,推流指的就是我们在直播平台看到的主播那一端采集摄像头数据推送到视频流服务器。而拉流就是观众这一段使用pc、移动端播放直播视频了。
564 0
|
域名解析 网络协议 视频直播
视频直播推流拉流慢、卡顿解决方案
视频直播类App当前已经普遍采用CDN来实现访问加速,但还是经常遇到推拉流慢、卡顿的问题。这类问题一般是由于调度不精准、域名劫持、终端手机接入网络动态切换等因素导致,结合使用CDN和HTTPDNS可以比较完美解决此类问题。
2119 0
视频直播推流拉流慢、卡顿解决方案
|
4月前
|
移动开发 Android开发 容器
uniapp中使用videojs构建H5直播播放器
【10月更文挑战第14天】这两天在开发H5直播带货功能模块,使用原生的video播放器播放不了m3u8的流地址,于是找了videojs,参考了网上的一些资料研究了一下,感觉还不错,videojs播放m3u8流地址还挺稳定的,下面就简单记录一下uniapp里面使用方式
|
9月前
|
编解码 安全 视频直播
为了在智能媒体服务中实现超低延时的直播效果,您需要购买和使用视频直播服务
【2月更文挑战第14天】为了在智能媒体服务中实现超低延时的直播效果,您需要购买和使用视频直播服务
90 3
|
视频直播 定位技术 UED
海外视频直播源码技术视频直播间的搭建
大家听到这里是不是感觉这个源码平台非常的熟悉,没错,这个源码平台就海外视频直播源码平台,而我说的这个房间就是视频直播间,主持人就是视频直播间内的主播,今天我就为大家分享海外视频直播源码技术视频直播间的搭建。
海外视频直播源码技术视频直播间的搭建
|
视频直播
【视频直播篇七】Aliplayer的使用
本文着重介绍Aliplayer的使用
1184 0
|
Web App开发
【视频点播】阿里云视频点播如何获取视频播放的URL
展示如何使用阿里云视频点播服务获取播放地址.
35045 0
【视频点播】阿里云视频点播如何获取视频播放的URL
|
存储 编解码 弹性计算
阿里云视频直播服务介绍|学习笔记
快速学习阿里云视频直播服务介绍
阿里云视频直播服务介绍|学习笔记
|
编解码 C#
C# 阿里云视频点播--视频转码
C# 阿里云视频点播--视频转码
518 0
C# 阿里云视频点播--视频转码
|
编解码 视频直播 Android开发
安卓实现视频直播(rtmp)以及直播推流(NDK实现)
安卓实现视频直播(rtmp)以及直播推流
965 0

热门文章

最新文章