KayleePop / vue-magnet

Adds a magnet attribute which acts like src but for torrent magnet links.
MIT License
4 stars 2 forks source link

Cannot load video #28

Closed owen800q closed 4 years ago

owen800q commented 4 years ago
<template>
<div class="anime">
  <video id="video" v-vue-magnet="src"  @magnet-loaded="logic"></video>
</div>
</template>

<script>
import VueMagnet from 'vue-magnet'
export default {
  name: 'anime',
  directives: { VueMagnet },
  data () {
    return {
      src: 'magnet:?xt=urn:btih:42930559caba6a99de5969b51e6e88183b665fc7'
    }
  },
  methods: {
    logic: function () {
      console.log('done')
    }
  }
}
</script>

<style lang="scss" scoped>
  .anime{
    position: absolute;
    top: 0;
    width: 100vw;
    height: 100vh;
  }
 video{
   width: 500px;
   height: 500px;
 }
</style>

Look like failed to load the torrent, the method logic not being executed.

image

owen800q commented 4 years ago

@KayleePop

owen800q commented 4 years ago

Also the example of loading image on README does not work for me

owen800q commented 4 years ago

If the directive being registered in a component, When the directive bound to the element video, the following won't getting called

 Vue.directive('magnet', (el, binding, vnode) => {}

Then, I register directive in main.js, it works now, the debugger step into it.

main.js

import VueMagnet from 'vue-magnet'
Vue.use(VueMagnet)

anime.vue

<template>
<div class="anime">
  <video v-magnet="src"
         @magnet-loaded="logic" controls></video>
</div>
</template>

<script>
export default {
  name: 'anime',
  data () {
    return {
      src: 'magnet:?xt=urn:btih:42930559caba6a99de5969b51e6e88183b665fc7'
    }
  },
  methods: {
    logic: function () {
      console.log('done')
    }
  }
}
</script>

<style lang="scss" scoped>
  .anime{
    position: absolute;
    top: 0;
    width: 100vw;
    height: 100vh;
  }
 video{
   width: 500px;
   height: 500px;
 }
</style>

But once listening the event ready for the passed torrent, the function renderFile never getting called

 torrent.once('ready', () => renderFile(torrent))

In my case, the debugger never step into renderFile

function renderFile(torrent){
//...
}

I used to think it's caused by torrent. However, I tried different torrent magnet, none of them works on this. but it works on webtorrent desktop

owen800q commented 4 years ago

Right, webtorrent on browser does not support torrents beside being seeded by webtorrent like bittorrent

KayleePop commented 4 years ago

so it's working once you seeded it with webtorrent-desktop or instant.io or something?