savokiss / vue-videojs-demo Goto Github PK

View Code? Open in Web Editor NEW

349.0 14.0 90.0 2.45 MB

Use video.js & vue to play RTMP && HLS streams && playback

Home Page: https://vue-videojs-demo.vercel.app/

License: MIT License

JavaScript 67.96% HTML 2.45% Vue 29.59%

vuejs videojs rtmp hls vue vue-videojs-demo

vue-videojs-demo's Introduction

vue-videojs-demo

Use video.js with vue to play RTMP && HLS streams && playback

Get Started

See: https://vue-videojs-demo.vercel.app/

In RTMP you'll see a cartoon && in HLS you'll see a dummy video

Just switch tech to see the differences

Features

Play RTMP & HLS videos
Auto detect stream & tech
Support auto switch streams
Support manual switch techs
Support custom stream link
Support playback link( see https://vue-videojs-demo.vercel.app/#/playback
Use local swf file

Live Player Options

playerOptions: {
  autoplay: false,
  controls: true,
  techOrder: ['flash', 'html5'],
  sourceOrder: true,
  flash: { hls: { withCredentials: false } },
  html5: { hls: { withCredentials: false } },
  sources: [{
    type: 'rtmp/mp4',
    src: 'rtmp://184.72.239.149/vod/&mp4:BigBuckBunny_115k.mov'
  }, {
    withCredentials: false,
    type: 'application/x-mpegURL',
    src: 'http://playertest.longtailvideo.com/adaptive/bipbop/gear4/prog_index.m3u8'
  }],
  poster: '/static/images/logo.png'
}

To use local swf file, copy the swf file to /static/media/ folder && add:

   swf: '/static/media/video-js.swf'

see source: live.vue

HLS Encryption Issue

see #1150

if you encounter the hls encryption issue, use the videojs-contrib-hls.js plugin instead.

edit main.js:

// import 'videojs-contrib-hls/dist/videojs-contrib-hls'
import 'videojs-contrib-hls.js/src/videojs.hlsjs'

WEB直播技术入门及在 Vue 中应用 video.js

License

vue-videojs-demo's People

Stargazers

Watchers

Forkers

beigailiyang athiwatp narakux jamy-mo syl150215 sevencon lawalias vueliwei fossabot xiangzi1226 austinlv antizen168 cruelwolfking livelikedog bc12138 faforty htt6275 wanwujiedao smallsong wellingtonjone fengwenqi123 fortunabee wenjun001 corpofin tulies trendingtechnology mazhongbin jiangvv marslisiyuan wendao8469759 jiujiaoaqila zgs123 351531104 cdeleduicon lxc66 lijun820 loumingshan gjincai glorygarage zoumelon 2010jing qishuangwang hhy5277 zhugscn ljia310 jiejieg xzwjandyou tangxiaodoul pancaiqiang fuyan ityufeng jeffcao kingshaohui mofeng1123 nelson119 sik0724 yqjack feng-hai breezedawn homtech always-chen songyl hengtuibabai junior-lv dotstormz szw619 frontend-project zview l851109001 mabing2637 c1026287787 yellela ucodgo thinklib ucheduk jinhang87 shuxiaokai mirr codecopy zhangludi openseem oximi123 yangrunxin kaisa0502 qq827435393 xiejiss txatxp auroav panggihmario

vue-videojs-demo's Issues

项目我已经跑起来了，我怎么播放不了.swf格式的视屏

比如 http://player.youku.com/player.php/sid/XNzQ0MTM3NzY=/v.swf 这样格式的视屏怎么设置可以播放呀

为什么clone的项目在本地运行之后没法播放rtmp呢？

请问下为什么clone的项目在本地运行之后没法播放rtmp呢？你提供的demo是可以播放的，放到自己本地就不行了

can you play rtmp in chrome ?

can you play rtmp in chrome ? or you have some idea about play rtmp stream in chrome.
thank you .

怎么循环渲染src呢

有一个需求,页面同时有好多个播放器,但是src不是死的.要动态获取.获取到之后要怎么循环赋值进去么. 有办法讲src放在组件属性么

Uncaught DOMException: Failed to read the 'handle' property from 'MediaSource': MediaSourceHandle creation is currently supported only in a dedicated worker.

在electron-vue项目播放rtmp出现无法使用flash技术

E:\work\test\electron\test\node_modules_video.js@[email protected]\dist\video.cjs.js:450 VIDEOJS: ERROR: The "flash" tech is undefined. Skipped browser support check for that tech.

E:\work\test\electron\test\node_modules_video.js@[email protected]\dist\video.cjs.js:450 VIDEOJS: ERROR: (CODE:4 MEDIA_ERR_SRC_NOT_SUPPORTED) No compatible source was found for this media. MediaError {code: 4, message: "No compatible source was found for this media."

但我看你测试网页上是可以播放的 https://surmon-china.github.io/vue-video-player/，我等下不用electron再试一下