一个前端,爱跑步、爱吉他、爱做饭、爱生活、爱编程、爱南芳姑娘,爱我所爱。世间最温暖又无价的是阳光、空气与爱,愿它们能带你去更远的地方。

  • 文章
  • 心情
  • 照片墙
  • 留言板
  • 工具
  • 友链
  • biaoblog

    专注web开发技术分享

    Video.js使用指南

    技术 130 2019-10-15 09:46

    1.引入JS和CSS包直接撸!

    <link href="http://vjs.zencdn.net/5.20.1/video-js.css" rel="stylesheet">
    <!-- 视频播放插件 -->
    <script src="http://vjs.zencdn.net/5.20.1/video.js"></script>
    <!-- 兼容ie8 -->
    <script src="http://vjs.zencdn.net/5.20.1/videojs-ie8.min.js"></script>
    

    2.在HTML中放入容器,这里选择通过JS控制。

    html:

    <!-- vjs-big-play-centered可使大的播放按钮居住,vjs-fluid可使视频占满容器 -->
    <video id="myVideo" class="video-js vjs-big-play-centered vjs-fluid">
    <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">
    s	upports HTML5 video
    </a>
    </p>
    </video>
    

    JS:

    <script>
    var player = videojs(document.getElementById('myVideo'), {
    controls: true, // 是否显示控制条
    poster: 'xxx', // 视频封面图地址
    preload: 'auto',
    autoplay: false,
    fluid: true, // 自适应宽高
    language: 'zh-CN', // 设置语言
    muted: false, // 是否静音
    inactivityTimeout: false,
    controlBar: { // 设置控制条组件
    /* 设置控制条里面组件的相关属性及显示与否
    'currentTimeDisplay':true,
    'timeDivider':true,
    'durationDisplay':true,
    'remainingTimeDisplay':false,
    volumePanel: {
    inline: false,
    }
    */
    /* 使用children的形式可以控制每一个控件的位置,以及显示与否 */
    children: [
    {name: 'playToggle'}, // 播放按钮
    {name: 'currentTimeDisplay'}, // 当前已播放时间
    {name: 'progressControl'}, // 播放进度条
    {name: 'durationDisplay'}, // 总时间
    { // 倍数播放
    name: 'playbackRateMenuButton',
    'playbackRates': [0.5, 1, 1.5, 2, 2.5]
    },
    {
    name: 'volumePanel', // 音量控制
    inline: false, // 不使用水平方式
    },
    {name: 'FullscreenToggle'} // 全屏
    ]
    },
    sources:[ // 视频源
    {
    src: '//vjs.zencdn.net/v/oceans.mp4',
    type: 'video/mp4',
    poster: '//vjs.zencdn.net/v/oceans.png'
    }
    ]
    }, function (){
    console.log('视频可以播放了',this);
    });
    </script>
    


    3.关于动态设置播放URL:

       //视频配置
                player = videojs(document.getElementById('myVideo'), {
                    sources:[ // 视频源
                        {
                            src: 'rtmp://192.168.168.10:1935/live/room1226752779',
                            type: 'rtmp/flv',
                        }
                    ]
                })
            var data = {
                        // src: res.result[1].rtmpUrl,
                        // src:"rtmp://192.168.168.10:1935/live/room1508839421",
                        src:res.result[1].rtmpUrl,
                        type: 'rtmp/flv'
                    }
            player.src(data)
            player.load(data)
    


    转自:https://segmentfault.com/a/1190000018914486?utm_source=tag-newest

    文章评论

    评论列表(0