angular5解决chrome等浏览器不能播放.m3u8视频流

1.安装video.js : npm install --save video.js

安装videojs-contrib-hls.js: npm install --save video.js

2.在.angular-cli.json的script标签中引入这两个依赖包

3.在typings.d.ts中声明： declare var videojs: any;

  <video #examplevideo class="video-js" autoplay="autoplay" controls preload="auto"width="100%" height="100%" ><source src="https://yunqivedio.alicdn.com/2017yq/v2/0x0/96d79d3f5400514a6883869399708e11/96d79d3f5400514a6883869399708e11.m3u8" type="application/x-mpegURL"></video>

@ViewChild('examplevideo') examplevideo: ElementRef;ngOnInit() {const that = this;window.onload = function() {let player = videojs(that.examplevideo.nativeElement);player.play();};}

angular5解决chrome等浏览器不能播放.m3u8视频流相关推荐

解决chrome系浏览器ime-mode问题
系统中卡号,身份证这种输入框希望不能输入汉字,且在扫码得到内容时也为数字或字母,当焦点在当前框内时输入法为英文状态. IE可以使用style="ime-mode:disabled;" ...
Vue Video.js播放m3u8视频流格式（video+videojs-contrib-hl）
文章目录 1. Vue+Video.js播放效果图 2. npm安装和引入 3. vue 使用 4. 动态设置video视频的src地址 5. Uncaught (in promise) TypeEr ...
解决 CHROME FLASH 不能自动播放的问题及加载视频前的“黑色背景”如何改变
chrome中flash不能自动播放,相信很多人都遇到了这个问题,网上检索的话,很多都会提到添加muted,当时尝试了这个方法,根本不起作用.后来慢慢发现一种情况:当单独在根节点中放入video后,可 ...
Vue+Video.js播放m3u8视频流(海康威视摄像头+RTMP服务+FFmpeg)
场景 Nginx搭建RTMP服务器+FFmpeg实现海康威视摄像头预览: Nginx搭建RTMP服务器+FFmpeg实现海康威视摄像头预览_BADAO_LIUMANG_QIZHI的博客-CSDN博客 ...
Windows上使用VLC插件的方式在IE浏览器上播放RTSP视频流
场景开源RTMP组件EasyPusher-Android+EasyDarwin实现APP推流给RTSP流媒体服务器: 开源RTMP组件EasyPusher-Android+EasyDarwin实现A ...
使用hls.js播放m3u8视频流
1.安装hls.js npm install hls.js -S 2.使用 <template><div class="video_con"><vid ...
chrome 使用gpu 加速_一招解决 Chrome / Edge 卡顿缓慢让浏览器重回流畅顺滑
最近一段时间,我发现电脑上的 Chrome 谷歌浏览器越用越卡了.特别是网页打开比较多,同时还有视频播放时,整个浏览器的响应速度都会变得非常缓慢,视频也会卡顿掉帧. 我用的是 iMac / 32GB ...
chrome顶部变黑_win10系统chrome内核浏览器地址栏变黑的解决方法
很多小伙伴都遇到过win10系统chrome内核浏览器地址栏变黑的困惑吧,一些朋友看过网上零散的win10系统chrome内核浏览器地址栏变黑的处理方法,并没有完完全全明白win10系统chrome内 ...
Windows上搭建rtsp-simple-server流媒体服务器实现rtsp、rtmp等推流以及转流、前端html与Vue中播放hls(m3u8)视频流
场景 Nginx-http-flv-module流媒体服务器搭建+模拟推流+flv.js在前端html和Vue中播放HTTP-FLV视频流: Nginx-http-flv-module流媒体服务器搭建 ...

angular5解决chrome等浏览器不能播放.m3u8视频流

angular5解决chrome等浏览器不能播放.m3u8视频流相关推荐

最新文章

热门文章