vue-magnet
Adds the magnet directive which acts like src, but uses torrent magnet links instead of http.
Works with <video>
, <img>
, <audio>
tags and more.
Streams large video and audio files before they are fully downloaded.
Install
npm install vue-magnet
const VueMagnet = require ( ' vue-magnet ' )
Vue . use ( VueMagnet )
or use a script tag to include the minified build. Be sure to use the cdn link from rawgit.com for production apps
< script src = " https://vuejs.org/js/vue.js " > < / script >
< script src = " https://rawgit.com/KayleePop/vue-magnet/master/vue-magnet.min.js " > < / script >
The minified script will automatically call window.Vue.use(VueMagnet)
, so you can start using v-magnet immediately.
A WebTorrent Client instance is created as the global Vue property Vue.WebTorrent
.
If Vue.WebTorrent
already exists before VueMagnet is installed, then VueMagnet will use the existing instance.
Usage
< script >
new Vue ( {
el : ' #app ' ,
data : {
spaceImageMagnetLink : ' magnet:?xt=urn:btih:2e95238d08ef2cc462e8eeb215b5f0f093b1b205&dn=space.jpg&tr=udp%3A%2F%2Fexplodie.org%3A6969&tr=udp%3A%2F%2Ftracker.coppersurfer.tk%3A6969&tr=udp%3A%2F%2Ftracker.leechers-paradise.org%3A6969&tr=udp%3A%2F%2Ftracker.openbittorrent.com%3A80&tr=udp%3A%2F%2Ftracker.opentrackr.org%3A1337&tr=udp%3A%2F%2Fzer0day.ch%3A1337&tr=wss%3A%2F%2Ftracker.btorrent.xyz&tr=wss%3A%2F%2Ftracker.fastcast.nz&tr=wss%3A%2F%2Ftracker.openwebtorrent.com '
} ,
methods : {
logic : function ( ) {
}
}
} )
</ script >
< div id = " app " >
< img v-magnet = " spaceImageMagnetLink "
@ magnet-loaded = " logic() " > </ img >
</ div >
A new &path=
query param in the magnet link is supported to specify a specific file in a multi-file torrent
< script >
new Vue ( {
el : ' img ' ,
data : {
sintelMagnet : ' magnet:?xt=urn:btih:08ada5a7a6183aae1e09d831df6748d566095a10&dn=Sintel&tr=udp%3A%2F%2Fexplodie.org%3A6969&tr=udp%3A%2F%2Ftracker.coppersurfer.tk%3A6969&tr=udp%3A%2F%2Ftracker.empire-js.us%3A1337&tr=udp%3A%2F%2Ftracker.leechers-paradise.org%3A6969&tr=udp%3A%2F%2Ftracker.opentrackr.org%3A1337&tr=wss%3A%2F%2Ftracker.btorrent.xyz&tr=wss%3A%2F%2Ftracker.fastcast.nz&tr=wss%3A%2F%2Ftracker.openwebtorrent.com&ws=https%3A%2F%2Fwebtorrent.io%2Ftorrents%2F&xs=https%3A%2F%2Fwebtorrent.io%2Ftorrents%2Fsintel.torrent '
}
} )
</ script >
< img v-magnet = " sintelMagnet + ' & path=poster.jpg' " > < / img >
A magnet link can be defined on install as well.
const VueMagnet = require ( ' vue-magnet ' )
Vue . use ( VueMagnet , { magnetLink : sintelMagnet } )
< img v-magnet = " 'poster.jpg' " > < / img >
How it works
This plugin is a declarative and Vue compatible API for WebTorrent's file.renderTo()
function documented here