In addition to Weibo, there is also WeChat
Please pay attention
WeChat public account
Shulou
2025-04-07 Update From: SLTechnology News&Howtos shulou NAV: SLTechnology News&Howtos > Development >
Share
Shulou(Shulou.com)06/03 Report--
This article mainly introduces how to achieve video playback with vue.js, which has a certain reference value. Interested friends can refer to it. I hope you will gain a lot after reading this article. Let the editor take you to know it.
Vue.js to achieve video playback methods: 1, install vue-video-player plug-in; 2, import video.js;3 in main.js, use vue-video-player plug-in.
This article operating environment: windows10 system, vue 2.5.2, thinkpad T480 computer.
There is a vue-video-player plug-in in vue that we can use for video playback. Let's take a look at it.
Use vue-video-player (can be adaptive and support multiple formats)
(1) install the vue-video-player plug-in
Cnpm install-save vue-video-player
(2) Import video.js in main.js
Import VideoPlayer from 'vue-video-player'Vue.use (VideoPlayer) require (' vue-video-player/src/custom-theme.css')
(3) use
{{'Video' + I}}
Export default {name: 'Video2', data () {return {playerOptions: {playbackRates: [0.7,1.0,1.5,2.0], / / playback speed autoplay: false, / / if true, the browser starts playback when it is ready. Muted: false, / / any audio will be eliminated by default. Loop: false, / / causes the video to restart as soon as it ends. Preload: 'auto', / / suggests whether browsers should start downloading video data after loading elements. The auto browser chooses the best behavior and immediately starts loading the video (if the browser supports it) language: 'zh-CN', aspectRatio:' 16 zh-CN', aspectRatio 9 players, / / puts the player in smooth mode and uses this value when calculating the dynamic size of the player. The value should represent a scale-two numbers separated by colons (such as "16:9" or "4:3") fluid: true, / / when true, Video.js player will have the fluid size. In other words, it will scale proportionally to fit its container. Sources: [{type: 'video/mp4', / / the categories here support many kinds: basic video format, live streaming, streaming, etc. For more information, please see the git URL project src:'.. / static/video1.mp4' / / url address}], poster:'.. / static/full_res.jpg', / / your cover address width: document.documentElement.clientWidth, / / player width notSupportedMessage: 'this video cannot be played temporarily Please try again later, / / allow you to override the default message displayed when Video.js cannot play the media source. ControlBar: {timeDivider: true, durationDisplay: true, remainingTimeDisplay: false, fullscreenToggle: true / / full screen Button}. Video-js .vjs-icon-placeholder {width: 80%; height: 80%; display: block;} / *. Video-player {width: 50% } * / Thank you for reading this article carefully. I hope the article "how to achieve Video playback in vue.js" shared by the editor will be helpful to everyone. At the same time, I also hope that you will support and follow the industry information channel. More related knowledge is waiting for you to learn!
Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.
Views: 0
*The comments in the above article only represent the author's personal views and do not represent the views and positions of this website. If you have more insights, please feel free to contribute and share.
Continue with the installation of the previous hadoop.First, install zookooper1. Decompress zookoope
"Every 5-10 years, there's a rare product, a really special, very unusual product that's the most un
© 2024 shulou.com SLNews company. All rights reserved.