Video.js使用指南

简介: Video.js使用指南

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


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

To view this video please enable JavaScript, and consider upgrading to a web browser that s upports HTML5 video


复制代码
JS:

复制代码

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
作者: Bill 本文地址: http://biaoblog.cn/info?id=1571103960000

版权声明: 本文为原创文章,版权归 biaoblog 个人博客 所有,欢迎分享本文,转载请保留出处,谢谢!

相关文章
|
8月前
|
敏捷开发 JavaScript 前端开发
❤❤❤【Vue.js最新版】sd.js基于jQuery Ajax最新原生完整版for凯哥API版本❤❤❤
❤❤❤【Vue.js最新版】sd.js基于jQuery Ajax最新原生完整版for凯哥API版本❤❤❤
|
8月前
|
前端开发 JavaScript PHP
解决在页面中无法获取qrcode.js生成的base64的图片
该文档介绍了如何解决在部分安卓手机上无法正确加载二维码图片的问题。之前的方法是使用qrcode.js生成二维码,然后与背景图结合用canvas绘制海报,但在某些安卓设备上遇到onload事件不触发的问题。
137 2
uniapp使用weiview引入本地Html5+ video 基于mui 5+的 视频播放器
uniapp使用weiview引入本地Html5+ video 基于mui 5+的 视频播放器
|
Web App开发 移动开发 编解码
flv.js 学习
这次有个项目要使用到flv.js,是我以前从未接触过的知识,边学边做吧
169 0
|
前端开发 JavaScript 开发者
使用JS实现图文混发
使用JS实现图文混发
|
存储 移动开发 JavaScript
Video.js 使用教程 - 手把手教你基于 Vue 搭建 HTML 5 视频播放器
Video.js 是最强大的网页嵌入式 HTML 5 视频播放器的组件库之一,也是大多数人首选的网页视频播放解决方案。复杂的网页视频渲染,在引入 Video.js 后,轻松解决。本教程手把手教你搭建一套基于 Vue 的 Video.js 视频播放页。 跟随本教程学习,最终你可以自己搭建一套可以播放本地视频文件及网络流媒体的网页视频播放器。学习如何修改 video.js 的默认样式来实现播放按钮自定义形状(圆形)、居中及播放时间的显示与否, 如何播放 m3u8 格式,以及如何使用 video 的属性、事件及方法,音量增减,最终实现一个功能齐全的视频播放器。
974 0
|
JavaScript 前端开发 Android开发
DPlayer.js视频播放插件使用方法
这篇文章主要为大家详细介绍了JSx实现简单控制视频播放倍速,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
1970 0
|
前端开发
前端学习案例-viewer.js实现预览效果
前端学习案例-viewer.js实现预览效果
268 0
|
JavaScript 前端开发
#yyds干货盘点# viewer.js实现预览效果
#yyds干货盘点# viewer.js实现预览效果
210 0
#yyds干货盘点# viewer.js实现预览效果