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 个人博客 所有,欢迎分享本文,转载请保留出处,谢谢!

相关文章
|
3月前
|
敏捷开发 JavaScript 前端开发
❤❤❤【Vue.js最新版】sd.js基于jQuery Ajax最新原生完整版for凯哥API版本❤❤❤
❤❤❤【Vue.js最新版】sd.js基于jQuery Ajax最新原生完整版for凯哥API版本❤❤❤
|
7天前
|
JavaScript 前端开发 数据可视化
图像裁剪库Cropper.js的学习使用
图像裁剪库Cropper.js的学习使用
26 4
|
1月前
|
JavaScript
【vue】 Tinymce 富文本编辑器 不想让上传的图片转换成base64,而是链接
【vue】 Tinymce 富文本编辑器 不想让上传的图片转换成base64,而是链接
60 0
|
前端开发
Viewer.js实现图片预览效果
Viewer.js实现图片预览效果
128 0
sound.js # pixi辅助插件 — 中文翻译教程
sound.js # pixi辅助插件 — 中文翻译教程
271 0
|
JavaScript 前端开发 Android开发
DPlayer.js视频播放插件使用方法
这篇文章主要为大家详细介绍了JSx实现简单控制视频播放倍速,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
1897 0
|
存储 移动开发 JavaScript
Video.js 使用教程 - 手把手教你基于 Vue 搭建 HTML 5 视频播放器
Video.js 是最强大的网页嵌入式 HTML 5 视频播放器的组件库之一,也是大多数人首选的网页视频播放解决方案。复杂的网页视频渲染,在引入 Video.js 后,轻松解决。本教程手把手教你搭建一套基于 Vue 的 Video.js 视频播放页。 跟随本教程学习,最终你可以自己搭建一套可以播放本地视频文件及网络流媒体的网页视频播放器。学习如何修改 video.js 的默认样式来实现播放按钮自定义形状(圆形)、居中及播放时间的显示与否, 如何播放 m3u8 格式,以及如何使用 video 的属性、事件及方法,音量增减,最终实现一个功能齐全的视频播放器。
837 0
|
JavaScript
vue使用video.js解决m3u8视频播放格式
vue使用video.js解决m3u8视频播放格式
1067 0
|
JavaScript
解决video.js不兼容ie8问题
解决video.js不兼容ie8问题
399 0
|
前端开发 容器 JavaScript