Creating a Vue.js project with Viddler's top-notch video player for seamless playback and dynamic

Hey there fellow developers!

I just dove into learning Vue.js yesterday, and I'm already hooked! I'm currently working on a small application that utilizes Vue (1.0.28) to showcase an online course. You can find a JSFiddle link at the end of this post, but first, let me share my current roadblock:

Within the javascript file of this application, I've defined a const named course_bundle, which holds all the necessary information about the course including the title, chapters, and files. Using Vue, I'm rendering this course on the screen.

Each chapter in the course comprises videos, and within the Vue instance, I'm initializing the player (with videos hosted on viddler) using Viddler's API:

let embed = new ViddlerEmbed({
    videoId: this.active,
    target: '#player',
    autoplay: 'true',
    type: 'video',
    width: '100%'
  });

Everything seems to be working fine. However, I encounter an issue when attempting to switch to another video by clicking on a chapter's title, which results in the video being duplicated. What I actually want is to pause the current video and then play the next one.

I might be missing something here, so any insights or suggestions would be greatly appreciated.

Here's a peek at what I've accomplished so far: https://jsfiddle.net/grpaiva/bkadrz9h/

Cheers to progress!

javascriptvue.js

Answer №1

Experimenting with your violin, I managed to successfully switch the video using a component, but I ended up converting it to Vue 2 in the process. If this isn't what you're looking for, feel free to continue :)

Vue.component("video-player",{
    props:["video_id"],
    template: `<div ref="player"></div>`,
  mounted(){
    this.embed = new ViddlerEmbed({
        videoId: this.video_id,
        target: this.$refs.player,
        autoplay: 'true',
        type: 'video',
        width: '100%'
    });
    this.embed.manager.events.on('videoPlayer:ended', function(){
        alert('video ended');
    });  
  }
})

// Creating Vue instance
new Vue({
  el: '#app',
  data: {
    courseTitle: course_bundle.general[0].title,
    chapters: course_bundle.chapters,
    active: course_bundle.chapters[0].video_id,
    files: course_bundle.files,
  },
});

Template

<div id="app" class="container">
    <div class="row">
      <video-player v-for="video in chapters" 
                    :key="video.video_id" 
                    :video_id="video.video_id"
                    v-if="active === video.video_id">
      </video-player>
    </div>
    <div class="row">
      <div class="list-group">

        <h5 class="list-group-item">{{ courseTitle }}</h5>

        <div @click="active = chapter.video_id" class="list-group-item" v-for="chapter in chapters">

          {{ chapter.title }}

        </div>

      </div>
    </div>
    <div class="row">      
      <a :href="file.url" target="_blank" v-for="file in files">
        <button class="btn btn-md btn-info">
          <i class="fa fa-file"></i>&nbsp;&nbsp;{{ file.title }} 
        </button>
      </a>
    </div>
  </div>

Check out the updated fiddle.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Delete the entry with the specified unique identifier "this text" from the MongoDB database

So, I've been searching high and low but still can't seem to figure out how to get this to work. Here's the issue I'm facing: I'm currently working on a chat application using node/express/socketio, and I'm attempting to crea ...

javascriptregexnode.jsmongodbmongoose

Utilizing Next.js routing to accommodate two distinct subdomains on a single website

I am looking to develop a new platform using Next.js (React.js and React-router). The platform will have two distinct spaces - one for users and another for the owner to manage all users. To achieve this, I plan on splitting both areas into two subdomains: ...

javascriptreactjsreact-routernext.js

What is the best way to navigate back on a button click in jquery AJAX without causing a page refresh?

Is there a way to navigate back without refreshing the page? I am fetching data dynamically using AJAX, but when I try to go back using the browser button, it takes me all the way back to the starting point. Let's look at the situation: 3 Different ...

javascriptphpjqueryhtmlajax

Ensuring a dependable detection of WebSocket connection status

I've been researching how to create a dependable method for recovering a WebSocket connection. After exploring various options, I discovered that one approach involves sending heartbeats (ping/pong) to the server and monitoring if the entire pong is ...

javascripthtmlwebsocket

Tips for Enhancing Window Leveling (Brightness and Contrast)

const pixelArray = [11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11..] if (pixelArray != null) { for (let i = 0; i < pixelArray.length; i++) { let ...

javascriptjsonhtml5-canvaspixeldicom

Should I opt for using mounted or created?

While working with VUE, I encountered an issue where I needed to pass an ID from a parent component to a child component. However, I noticed that when the child component is called again through a button after the initial render, the ID becomes null. Shoul ...

vue.jsvuetify.js

What is the best method for comparing two JSON objects in AngularJS?

I am working with two JSON objects. $scope.car1={"Sedan":{"Audi":["A4","A3"]},"Hatchback":{"Maruthi":["Swift"]}}; $scope.car2={"Hatchback":{"Maruthi":["Swift"]},"Sedan":{"Audi":["A3","A4"]}}; I have attempted to compare these two objects using the co ...

javascriptjsonangularjs

Certain sections within a Formik form are failing to update as intended

I have successfully implemented a custom TextField wrapper for Material-UI fields, but I am facing an issue with native Material UI fields not updating the form data upon submission. Below is the relevant code snippet along with a link to a code sandbox d ...

javascriptreactjstypescriptmaterial-ui

data in Vue not updating after setting value in session storage

I recently encountered an issue with setting values to session storage in my main.ts file after making an axios call. Despite successfully saving the data, I found that accessing it in another component resulted in 'undefined' values. It seems li ...

vue.jsaxios

Loop through items in Node.js

Is anyone familiar with a way to obtain the computed styles of anchor tags when hovering over them on a webpage? I've tried using this function, but it only returns the original styles of the anchor and not the hover styles. Any assistance would be gr ...

javascriptjquerynode.jspuppeteer

Finding the IP address from a hostname in Node.js: A step-by-step guide

I am looking for a solution to resolve a hostname defined in the hosts file to its corresponding IP address. Take, for instance, my hosts file located at "/etc/hosts": 127.0.0.1 ggns2dss81 localhost.localdomain localhost ::1 localhost6.localdomain ...

javascriptnode.jsip-addresshostnamehosts

The express-fileupload throws an error saying "ENOENT: unable to locate the file or directory at 'public/images/name.ext'"

I am encountering an error ENOENT: no such file or directory, open 'public/images/name.ext from express-fileupload. I have searched for solutions to this issue, but none of the ones I found seem to work for me. Here are two examples: No such file or d ...

javascriptnode.jsexpress

Updating content with jQuery based on radio button selection

Looking for assistance with a simple jQuery code that will display different content when different radio buttons are clicked. Check out the code here. This is the HTML code: <label class="radio inline"> <input id="up_radio" type="radio" n ...

javascriptjqueryhtml

Is Python a suitable programming language for developing applications on a Raspberry Pi device?

I'm diving into the coding world for the first time and I have a project in mind - controlling my RC car with my smartphone using a Raspberry Pi 3. Research suggests that I should use Node.JS and JavaScript to create the app, but I'm wondering if ...

javascriptpythonnode.jsraspberry-pi3

Why isn't cancelAll function available within the onComplete callback of Fine Uploader?

This is the completion of my task. $('#fine-uploader-house').fineUploader({ ... }).on('complete', function(event, id, name, jsonData) { if(!checkEmpty(jsonData.cancelAll) && jsonData.cancelAll){ //$(this).cancelAll(); ...

javascriptjqueryfine-uploader

Tips for displaying Ajax response in a modal popup

I have a link that, when clicked, sends an AJAX request and successfully receives a response in the form of an HTML file, which I then append to a div. However, I want to display this div as a modal popup and I have attempted the following: In the HTML fi ...

javascriptjavajqueryhtmlajax

What is the best approach to managing deletions in Vue Apollo when dealing with intricate, nested queries?

I am facing a situation where I have a complex query that fetches multiple nested objects to populate a detailed screen with information. Now, my goal is to remove one of the deeply-nested objects and reflect this change on the screen without having to re- ...

vue.jsgraphqlapollo-client

Is Vercel deploying an incorrect version?

After working on a project for a potential employer and fixing all errors, I deployed it using Vercel. However, upon deployment, the version that was sent to me was displayed instead of the completed one I see when running npm start locally. I would great ...

javascriptreactjsnpmgoogle-cloud-firestorevercel

Looking for assistance with a JavaScript code snippet

I have encountered an issue while iterating through receipts in the given code snippet. The objective is to fetch the receipt number for each receipt and add it to a JSON object. However, I am facing a problem where the same receipt is appearing in two sep ...

javascriptjson

Is there a way for me to verify if a number is represented in exponential form?

Is there a way to determine if a number is in exponential form? I encountered a situation in my code where normal integers are being converted to exponential notation when adding or multiplying them. For instance, performing the operation 10000000*1000000 ...

javascriptnode.js