vue.js项目实战运用篇之抖音视频APP-第八节: 视频播放功能

vue.js项目实战运用篇之抖音视频APP-第五节:视频播放列表组件功能 【温馨提示】:若想了解更多关于本次项目实战内容,可转至vue.js项目实战运用篇之抖音视频APP-项目规划中进一步了解项目规划。 【项目地址】 项目采用Git进行管理,最终项目将会发布到GitHub中,感兴趣的小伙伴们可以一起学习,共同完善本项目。 项目地址:GitHub 第五节:视频播放列表组件功能 vue-awesome-swiper介绍 众所周知的图片轮播插件swiper,快速,简单,高效,稳定。不过最新的swiper6对vue的兼容却不如人意。那么我们怎么解决这一问题呢?可使用第三轮播插件,运用J 阅读详情

【温馨提示】:若想了解更多关于本次项目实战内容,可转至vue.js项目实战运用篇之抖音视频APP-项目规划中进一步了解项目规划。

【项目地址】
项目采用Git进行管理,最终项目将会发布到GitHub中,感兴趣的小伙伴们可以一起学习,共同完善本项目。
项目地址:GitHub


第八节: 视频播放功能

回顾及介绍

在第五节中我们实现了视频列表及视频播放的组件,在这一章节中将进一步了解视频播放的自动播放、暂停、播放等功能的实现及详细解说。
视频播放组件详细地址:common/components/Vidoes。

视频播放器的配置介绍

1.autoplay:数据类型为bool类型,此参数的作用在于当打开浏览器后是否开始回放,若为true时,则回放;若为false时,则不回放。
2.muted:数据类型为bool类型,此参数是在默认情况下小长任何音频(视频声音)。若为true时,则消除;若为false时,则不消除。
3.loop:数据类型为bool类型,此参数作用于是否视频播放结束即重新开始播放。若为true时,则重新播放;若为false时,则不播放。
4.fluid:数据类型为bool类型,此参数作用于是否按比例缩放适应容器的大小,也可以表示为Video.js player将拥有流体大小。若为true时,则适应缩放;若为false时,则不适应缩放。
5.notSupportedMessage: 数据类型为字符类型,此参数为设置默认信息。意思是在视频无法播放时,显示默认信息。如:“此视频暂无法播放,请稍后再试”。

export default {
   
   
  name: 'Videos',
  props: ['video', 'index'],
  data() {
   
   
    return {
   
   
      playerOptions: {
   
   
        autoplay: false, // 如果true,浏览器准备好时开始回放。
        muted: true, // 默认情况下将会消除任何音频。
        loop: true, // 导致视频一结束就重新开始。
        preload
vue.js项目实战运用篇之抖音视频APP-第九节: 视频上滑下拉播放功能 【温馨提示】:若想了解更多关于本次项目实战内容,可转至vue.js项目实战运用篇之抖音视频APP-项目规划中进一步了解项目规划。 【项目地址】 项目采用Git进行管理,最终项目将会发布到GitHub中,感兴趣的小伙伴们可以一起学习,共同完善本项目。 项目地址:GitHub 第九节: 视频上滑下拉播放功能 回顾及介绍 在第五节中我们实现了视频列表及视频播放的组件,在这一章节中将进一步了解上滑、下滑播放视频的实现。 视频播放组件详细地址:common/components/VidoeList。 上滑播放功 阅读详情

相关推荐

实现抖音视频滑动功能vue3+swiper

首先,你需要安装和引入Swiper库。可以使用npm或者yarn进行安装。然后在Vue组件中引入Swiper库和样式。接下来,我们可以在Vue组件中定义Swiper的滑动功能。这是一个Vue组件,用于展示一个垂直方向的轮播图,每个轮播项包含一个视频和相关信息。视频可以自动播放、循环播放,并且有播放进度条。

qq_45585640的博客 2017

uniapp h5 竖向的swiper内嵌视频实现抖音短视频垂直切换,丝滑切换视频效果,无限数据加载不卡顿

博主一开始一直想实现类似抖音进入页面自动播放当前视频,上下滑动切换之后播放当前视频,但最后在ios上出现声音播放,但画面卡顿的问题,估计是ios的浏览器对自动播放做了安全限制,导致自动播放失效,为了功能的可用性,最终放弃自动播放,实现手动点击视频正中心的播放按钮进行播放,再点击视频暂停,这个bug在安卓端暂时没出现,大概率是ios的安全性更高导致的浏览器策略拦截了,需要用户手动交互。

国企程序媛 record 前端技术 & review code。。。 6594

vue+swiper仿抖音视频滑动

解释一番,本文章只是做了一个仿抖音的滑动效果,并没有添加其他效果,例如头部的类似关注与推荐功能、广告、右侧按钮等等,这些功能可按项目需求添加,在这里我就不多bb了。 先看下模拟器上的成品图。 ps:手机拍摄的,请忽略画质。 这是视频的预览图,video的poster属性,可以去查查 首先引入相关文件vue、swiper swiper官网https://www.swiper.com.cn/ 废话不说,直接贴代码。 <!DOCTYPE html> <html> <hea

空&白的博客 4557

【Web前端】HTML简述及抖音实例

一个简单的HTML教程

weixin_64557527的博客 2960

第 15 章 C++ 线程和锁

本章全面介绍了C++多线程编程的核心概念和技术。主要内容包括:线程管理(创建、等待、分离、休眠)、多线程编程(数据竞争、死锁、虚假唤醒)、互斥锁(mutex、lock_guard、unique_lock)、条件变量、原子操作、异步编程(async/future)以及共享读写锁(shared_mutex)。通过丰富的代码示例展示了线程同步机制的实际应用,并深入探讨了底层实现原理。最后提供了综合案例和思考题,帮助读者巩固多线程编程的关键技术,如避免死锁、实现定时任务等。本章内容系统全面,涵盖了现代C++并发编程

杨充 2583

保姆级教程:用NodeMediaClient在Android实现RTMP拉流播放(附避坑指南)

本文提供了一份详尽的Android平台RTMP拉流播放实现与深度调优指南。重点介绍了如何使用NodeMediaClient库进行集成,并针对视频卡顿、花屏等常见问题,从渲染引擎选择(SurfaceView与TextureView)、解码策略、缓冲区优化到高级网络自适应等方面提供了实战解决方案与避坑技巧。

weixin_29261711的博客 437

Matlab Robotics Toolbox实战:四自由度机械臂建模与仿真全流程(附代码)

本文详细介绍了使用Matlab Robotics Toolbox进行四自由度机械臂建模与仿真的全流程,包括DH参数定义、模型构建、可视化、运动学仿真及交互控制。通过实战案例和代码示例,帮助读者快速掌握机械臂建模技巧,提升机器人学习效率。

weixin_42538752的博客 415

告别GPS,用Sentinel-1数据+Python实战SBAS-InSAR监测城市地面沉降(保姆级教程)

本文详细介绍了如何利用Sentinel-1数据和Python实现SBAS-InSAR技术监测城市地面沉降。通过保姆级教程,从环境配置、数据获取到干涉处理、时序分析和形变反演,逐步解析全流程技术细节,帮助读者掌握毫米级精度的形变监测方法,并以上海陆家嘴区域为例展示实际应用效果。

weixin_32771907的博客 534

Python量化- Black-Litterman 模型

​​​​​​​Black-Litterman 模型由 Fischer Black 和 Robert Litterman 于 1992 年开发,采用贝叶斯方法进行资产配置。该模型通过结合先前的回报估计(可以从多个来源得出)并结合投资者对未来回报的独特预期来优化分配权重。

探索人工智能领域 1030

GTK4 入门到实战

本文介绍GTK4作为主流Linux GUI工具包的发展历程与核心特性,涵盖其从GIMP项目诞生的自由软件理念、版本演进及跨平台支持。重点解析GTK4的架构(GDK/GSK/GLib等)、GObject对象系统、信号-回调机制与事件驱动模型,并以C语言为例,结合开发环境搭建与官方示例(gtk4-demo)指导实践,最终通过图片查看器与多标签编辑器项目实现完整应用开发。

OneSea 1390

【AI大模型应用开发】教你用AI轻松将你的知识库变为知识图谱(附完整代码,直接运行)

本文我们来介绍如何使用AI,将自己的知识库自动转换为知识图谱,并进行可视化展示。

同学小张的博客 3925

华为OD机试 - 战士技能规划设计 - 数组(Python/JS/C/C++ 新系统 100分)

本专栏收录于《华为OD机试真题(Python/JS/C/C++)》。刷的越多,抽中的概率越大,私信哪吒,备注华为OD,加入华为OD刷题交流群,每一题都有详细的答题思路、详细的代码注释、3个测试用例、为什么这道题采用XX算法、XX算法的适用场景,发现新题目,随时更新。你为一款动作游戏设计战士角色的技能:战士每个技能会消耗不同能量,释放技能有 2 个约束:连续释放技能数量不能超过 m 个,技能能量总和不能超过能量上限 k;如果超过则必须中断当前技能,进入调息状态(即分段)。战士有一项爆发技巧:在单次战斗中有一次

学Java,找哪吒 224

VB摄像头监控

该VB模块可对摄像头捕获的画面进行录像等,可在创建的窗口进行控制

Data-Structures-and-Algorithm-Analysis-in-Java.pdf

作者: Weiss, Mark A. 出版社: Addison Wesley Data Structures and Algorithm Analysis in Java is an “advanced algorithms” book that fits between traditional CS2 and Algorithms Analysis courses. In the old ACM Curriculum Guidelines, this course was known as CS7. This text is for readers who want to learn good programming and algorithm analysis skills simultaneously so that they can develop such programs with the maximum amo...

深度学习工具包 DeepLearningToolbox

深度学习工具包Deprecation notice.-----This toolbox is outdated and no longer maintained.There are much better tools available for deep learning than this toolbox, e.g. [Theano](http://deeplearning.net/software/theano/), [torch](http://torch.ch/) or [tensorflow](http://www.tensorflow.org/)I would suggest you use one of the tools mentioned above rather than use this toolbox.Best, Rasmus.DeepLearnToolbox================A Matlab toolbox for Deep Learning.Deep Learning is a new subfield of machine learning that focuses on learning deep hierarchical models of data.It is inspired by the human brain&#39;s apparent deep (layered, hierarchical) architecture.A good overview of the theory of Deep Learning theory is[Learning Deep Architectures for AI](http://www.iro.umontreal.ca/~bengioy/papers/ftml_book.pdf)For a more informal introduction, see the following videos by Geoffrey Hinton and Andrew Ng.* [The Next Generation of Neural Networks](http://www.youtube.com/watch?v=AyzOUbkUf3M) (Hinton, 2007)* [Recent Developments in Deep Learning](http://www.youtube.com/watch?v=VdIURAu1-aU) (Hinton, 2010)* [Unsupervised Feature Learning and Deep Learning](http://www.youtube.com/watch?v=ZmNOAtZIgIk) (Ng, 2011)If you use this toolbox in your research please cite [Prediction as a candidate for learning deep hierarchical models of data](http://www2.imm.dtu.dk/pubdb/views/publication_details.php?id=6284)```@MASTERSTHESIS\{IMM2012-06284, author = "R. B. Palm", title = "Prediction as a candidate for learning deep hierarchical models of data", year = "2012",}```Contact: rasmusbergpalm at gmail dot comDirectories included in the toolbox-----------------------------------`NN/` - A library for Feedforward Backpropagation Neural Networks`CNN/` - A library for Convolutional Neural Networks`DBN/` - A library for Deep Belief Networks`SAE/` - A library for Stacked Auto-Encoders`CAE/` - A library for Convolutional Auto-Encoders`util/` - Utility functions used by the libraries`data/` - Data used by the examples`tests/` - unit tests to verify toolbox is workingFor references on each library check REFS.mdSetup-----1. Download.2. addpath(genpath(&#39;DeepLearnToolbox&#39;));Example: Deep Belief Network---------------------```matlabfunction test_example_DBNload mnist_uint8;train_x = double(train_x) / 255;test_x = double(test_x) / 255;train_y = double(train_y);test_y = double(test_y);%% ex1 train a 100 hidden unit RBM and visualize its weightsrand(&#39;state&#39;,0)dbn.sizes = [100];opts.numepochs = 1;opts.batchsize = 100;opts.momentum = 0;opts.alpha = 1;dbn = dbnsetup(dbn, train_x, opts);dbn = dbntrain(dbn, train_x, opts);figure; visualize(dbn.rbm{1}.W&#39;); % Visualize the RBM weights%% ex2 train a 100-100 hidden unit DBN and use its weights to initialize a NNrand(&#39;state&#39;,0)%train dbndbn.sizes = [100 100];opts.numepochs = 1;opts.batchsize = 100;opts.momentum = 0;opts.alpha = 1;dbn = dbnsetup(dbn, train_x, opts);dbn = dbntrain(dbn, train_x, opts);%unfold dbn to nnnn = dbnunfoldtonn(dbn, 10);nn.activation_function = &#39;sigm&#39;;%train nnopts.numepochs = 1;opts.batchsize = 100;nn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.10, &#39;Too big error&#39;);```Example: Stacked Auto-Encoders---------------------```matlabfunction test_example_SAEload mnist_uint8;train_x = double(train_x)/255;test_x = double(test_x)/255;train_y = double(train_y);test_y = double(test_y);%% ex1 train a 100 hidden unit SDAE and use it to initialize a FFNN% Setup and train a stacked denoising autoencoder (SDAE)rand(&#39;state&#39;,0)sae = saesetup([784 100]);sae.ae{1}.activation_function = &#39;sigm&#39;;sae.ae{1}.learningRate = 1;sae.ae{1}.inputZeroMaskedFraction = 0.5;opts.numepochs = 1;opts.batchsize = 100;sae = saetrain(sae, train_x, opts);visualize(sae.ae{1}.W{1}(:,2:end)&#39;)% Use the SDAE to initialize a FFNNnn = nnsetup([784 100 10]);nn.activation_function = &#39;sigm&#39;;nn.learningRate = 1;nn.W{1} = sae.ae{1}.W{1};% Train the FFNNopts.numepochs = 1;opts.batchsize = 100;nn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.16, &#39;Too big error&#39;);```Example: Convolutional Neural Nets---------------------```matlabfunction test_example_CNNload mnist_uint8;train_x = double(reshape(train_x&#39;,28,28,60000))/255;test_x = double(reshape(test_x&#39;,28,28,10000))/255;train_y = double(train_y&#39;);test_y = double(test_y&#39;);%% ex1 Train a 6c-2s-12c-2s Convolutional neural network %will run 1 epoch in about 200 second and get around 11% error. %With 100 epochs you&#39;ll get around 1.2% errorrand(&#39;state&#39;,0)cnn.layers = { struct(&#39;type&#39;, &#39;i&#39;) %input layer struct(&#39;type&#39;, &#39;c&#39;, &#39;outputmaps&#39;, 6, &#39;kernelsize&#39;, 5) %convolution layer struct(&#39;type&#39;, &#39;s&#39;, &#39;scale&#39;, 2) %sub sampling layer struct(&#39;type&#39;, &#39;c&#39;, &#39;outputmaps&#39;, 12, &#39;kernelsize&#39;, 5) %convolution layer struct(&#39;type&#39;, &#39;s&#39;, &#39;scale&#39;, 2) %subsampling layer};cnn = cnnsetup(cnn, train_x, train_y);opts.alpha = 1;opts.batchsize = 50;opts.numepochs = 1;cnn = cnntrain(cnn, train_x, train_y, opts);[er, bad] = cnntest(cnn, test_x, test_y);%plot mean squared errorfigure; plot(cnn.rL);assert(er<0.12, &#39;Too big error&#39;);```Example: Neural Networks---------------------```matlabfunction test_example_NNload mnist_uint8;train_x = double(train_x) / 255;test_x = double(test_x) / 255;train_y = double(train_y);test_y = double(test_y);% normalize[train_x, mu, sigma] = zscore(train_x);test_x = normalize(test_x, mu, sigma);%% ex1 vanilla neural netrand(&#39;state&#39;,0)nn = nnsetup([784 100 10]);opts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samples[nn, L] = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.08, &#39;Too big error&#39;);%% ex2 neural net with L2 weight decayrand(&#39;state&#39;,0)nn = nnsetup([784 100 10]);nn.weightPenaltyL2 = 1e-4; % L2 weight decayopts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, &#39;Too big error&#39;);%% ex3 neural net with dropoutrand(&#39;state&#39;,0)nn = nnsetup([784 100 10]);nn.dropoutFraction = 0.5; % Dropout fraction opts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, &#39;Too big error&#39;);%% ex4 neural net with sigmoid activation functionrand(&#39;state&#39;,0)nn = nnsetup([784 100 10]);nn.activation_function = &#39;sigm&#39;; % Sigmoid activation functionnn.learningRate = 1; % Sigm require a lower learning rateopts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, &#39;Too big error&#39;);%% ex5 plotting functionalityrand(&#39;state&#39;,0)nn = nnsetup([784 20 10]);opts.numepochs = 5; % Number of full sweeps through datann.output = &#39;softmax&#39;; % use softmax outputopts.batchsize = 1000; % Take a mean gradient step over this many samplesopts.plot = 1; % enable plottingnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, &#39;Too big error&#39;);%% ex6 neural net with sigmoid activation and plotting of validation and training error% split training data into training and validation datavx = train_x(1:10000,:);tx = train_x(10001:end,:);vy = train_y(1:10000,:);ty = train_y(10001:end,:);rand(&#39;state&#39;,0)nn = nnsetup([784 20 10]); nn.output = &#39;softmax&#39;; % use softmax outputopts.numepochs = 5; % Number of full sweeps through dataopts.batchsize = 1000; % Take a mean gradient step over this many samplesopts.plot = 1; % enable plottingnn = nntrain(nn, tx, ty, opts, vx, vy); % nntrain takes validation set as last two arguments (optionally)[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, &#39;Too big error&#39;);```[![Bitdeli Badge](https://d2weczhvl823v0.cloudfront.net/rasmusbergpalm/deeplearntoolbox/trend.png)](https://bitdeli.com/free "Bitdeli Badge")

假人有限元模型

假人模型,车辆碰撞假人有限元模型,适合做乘员安全的研究者利用

上一篇: vue.js项目实战运用篇之抖音视频APP-第七节: 视频点评快捷功能
下一篇: vue.js项目实战运用篇之抖音视频APP-第九节: 视频上滑下拉播放功能
enjsky.G
博客等级 码龄8年 16粉丝 29原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值