video.js 播放流媒体

2024-05-17 22:53:30

video.js 播放流媒体

新人博主请多关照，若有侵权，联系改正。谢谢
参考博客地址：https://www.cnblogs.com/FHC1994/p/9981440.html
https://www.cnblogs.com/zhifa/p/11158356.html
https://blog.csdn.net/zlb_lover/article/details/71158416
测试连接：https://www.jianshu.com/p/5c001dce85b8

通过video.js 播放视频通过传输动态src 播放需要引入
video.js文件

在body中添加元素标签 video

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

这里我是默认有播放视频添加scrip标签加上如下代码

添加播放控件（这里我是通过text传输的值）

在js代码中天加如下代码
function Buttong_onclick(){
var videoUrl= document.getElementById(‘index’).value;//此处填写你的视频地址
//alert(“videoUrl===”+videoUrl);
var myPlayer = videojs(‘example_video_1’);
videojs(“example_video_1”).ready(function() {
var myPlayer = this;
myPlayer.src(videoUrl); /动态设置video.js播放的地址。/
myPlayer.autoplay();
document.getElementById(“example_video_1”).play();
});
}

就完成了
效果图如下这是src动态输入的地址

默认的地址

video.js 播放流媒体相关推荐

EasyDSS高性能RTMP、HLS(m3u8)、HTTP-FLV、RTSP流媒体服务器前端源码重构(四)- webpack + video.js 打造流媒体服务器前端
EasyPlayer播放器是基于EasyDSS流媒体服务器视频强大的后台管理能力,提供视频点播和直播播放能力的强大播放载体.流畅稳定的播放性能,集广告植入.数据监测等功能于一身,为开发者提供端到端的一 ...
video.js播放rtmp直播源和hls直播源
看了很多网上的坑,都是无法播放的,这次自己亲测能播放注意如果是自己制作的源的话,在推流之后要先等一小会才可以播放 video.js播放rtmp源一定要注意你的Chrome浏览器允许播放flash, ...
Vue Video.js播放m3u8视频流格式（video+videojs-contrib-hl）
文章目录 1. Vue+Video.js播放效果图 2. npm安装和引入 3. vue 使用 4. 动态设置video视频的src地址 5. Uncaught (in promise) TypeEr ...
m3u8.php怎么调用,怎样使用Vue结合Video.js播放m3u8视频
这次给大家带来怎样使用Vue结合Video.js播放m3u8视频,使用Vue结合Video.js播放m3u8视频的注意事项有哪些,下面就是实战案例,一起来看一下. 首先,我们需要在vue工程中安装vi ...
videojs 卡顿_流媒体技术学习笔记之（四）解决问题video.js 播放m3u8格式的文件,根据官方的文档添加videojs-contrib-hls也不行的原因解决了...
总结: 说明: 测试环境:本测试全部来自阿里云直播和OSS存储点播以及本地服务器直播和点播播放器:VideoJs 直播: 1.阿里云直播,需要CDN设置HTTP头 2.本地直播需要设置直播访问服务器 ...
video.js播放rtmp视频
最近公司要求拉取某公司流媒体服务器的视频监控,并在web端页面播放,流媒体服务器发送的是rtmp格式视频流,经过网上查资料,最后敲定使用video.js rtmp流需要依托flash播放,现在大多浏览 ...
Vue+Video.js播放m3u8视频流(海康威视摄像头+RTMP服务+FFmpeg)
场景 Nginx搭建RTMP服务器+FFmpeg实现海康威视摄像头预览: Nginx搭建RTMP服务器+FFmpeg实现海康威视摄像头预览_BADAO_LIUMANG_QIZHI的博客-CSDN博客 ...
video.js播放m3u8视频
m3u8 是一种基于HTTP Live Streaming(HLS)文件视频格式,它主要是存放整个视频的基本信息和分片(Segment)组成.目前由 Apple.inc 率先提出的 HLS 协议在 ...
vue开发移动端使用video.js播放视频
安装引入文档 HTML代码 css自定义播放按钮 css居中播放按钮 css设置简洁播放按钮 css设置海报占据整个视频空间 js使用设置 videojs设置中文销毁视频播放器实例使用html ...

最新文章

热门文章