【视频直播篇六】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>
相关文章
|
视频直播
【视频直播篇七】Aliplayer的使用
本文着重介绍Aliplayer的使用
1184 0
|
视频直播 前端开发
|
视频直播
拥有视频直播源码之后就万事大吉了吗,大错特错!
从2016年直播行业逐渐的兴起,虽然爆发式的上升已经过去,但是整个行业仍然保持着稳步上升的发展趋势,所以关于视频直播源码的开发市场也是持续的火爆。很多小白可能以为手里有了直播源码就可以开工了,殊不知关于流媒体传输方面的知识也是需要有一个简单了解的。
拥有视频直播源码之后就万事大吉了吗,大错特错!
|
视频直播 Windows Go
直播APP源码,视频直播技术篇 。
直播行业现在是越发的火热,人们对于视频直播的热情也是久盛不衰,云豹直播的技术人员在这里就教大家编写一个小小的视频直播片段。Windows Media Player 系列(不同面板样式) 综合型:id=MediaPlayer type=application/x-oleobject width=21...
3283 0
|
Web App开发 移动开发 编解码
使用websocket做视频直播
使用websocket做视频直播
618 0
|
存储 编解码 弹性计算
阿里云视频直播服务介绍|学习笔记
快速学习阿里云视频直播服务介绍
阿里云视频直播服务介绍|学习笔记
|
开发工具 开发者 微服务
技术点-阿里云视频点播(上传视频) | 学习笔记
快速学习技术点-阿里云视频点播(上传视频)
|
视频直播 定位技术 UED
海外视频直播源码技术视频直播间的搭建
大家听到这里是不是感觉这个源码平台非常的熟悉,没错,这个源码平台就海外视频直播源码平台,而我说的这个房间就是视频直播间,主持人就是视频直播间内的主播,今天我就为大家分享海外视频直播源码技术视频直播间的搭建。
海外视频直播源码技术视频直播间的搭建

热门文章

最新文章