048:利用vue-video-player播放m3u8

在这里插入图片描述

第048个

查看专栏目录: VUE ------ element UI


专栏目标

在vue和element UI联合技术栈的操控下,本专栏提供行之有效的源代码示例和信息点介绍,做到灵活运用。

(1)提供vue2的一些基本操作:安装、引用,模板使用,computed,watch,生命周期(beforeCreate,created,beforeMount,mounted, beforeUpdate,updated, beforeDestroy,destroyed,activated,deactivated,errorCaptured,components,)、 $root , $parent , $children , $slots , $refs , props, $emit , eventbus ,provide / inject, Vue.observable, $listeners, $attrs, $nextTick , v-for, v-if, v-else,v-else-if,v-on,v-pre,v-cloak,v-once,v-model, v-html, v-text, keep-alive,slot-scope, filters, v-bind,.stop, .native, directives,mixin,render,国际化,Vue Router等

(2)提供element UI的经典操作:安装,引用,国际化,el-row,el-col,el-button,el-link,el-radio,el-checkbox ,el-input,el-select, el-cascader, el-input-number, el-switch,el-slider, el-time-picker, el-date-picker, el-upload, el-rate, el-color-picker, el-transfer, el-form, el-table, el-tree, el-pagination,el-badge,el-avatar,el-skeleton, el-empty, el-descriptions, el-result, el-statistic, el-alert, v-loading, $message, $alert, $prompt, $confirm , $notify, el-breadcrumb, el-page-header,el-tabs ,el-dropdown,el-steps,el-dialog, el-tooltip, el-popover, el-popconfirm, el-card, el-carousel, el-collapse, el-timeline, el-divider, el-calendar, el-image, el-backtop,v-infinite-scroll, el-drawer等

本文章目录

    • 专栏目标
    • 应用场景
    • 示例效果
    • 示例源代码(共108行)

应用场景

目前利用vue项目解决视频直播问题,大家采用一种方式是利用vue-video-player组件来处理相关的视频流。作者做了一个完整的代码示例,供参考:

示例效果

在这里插入图片描述

示例源代码(共108行)

<template> <div class="container"> <div class="player"> <video-player  class="video-player vjs-custom-skin" ref="videoPlayer" :playsinline="true" :options="playerOptions"></video-player> </div> </div> 
</template> <script> 
import 'video.js/dist/video-js.css'; 
import 'vue-video-player/src/custom-theme.css'; 
import { videoPlayer } from 'vue-video-player'; //导入组件 
import videojs from 'video.js'; 
window.videojs = videojs; 
require('videojs-contrib-hls/dist/videojs-contrib-hls.js'); export default { data() { return { srcvideo: '', //视频地址 playerOptions: { playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度 autoplay: true, //如果true,浏览器准备好时开始回放。 muted: false, // 默认情况下将会消除任何音频。 loop: false, // 导致视频一结束就重新开始。 preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频(如果浏览器支持) language: 'zh-CN', aspectRatio: '16:9', // 将播放器置于流畅模式,并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字(例如"16:9"或"4:3") fluid: true, // 当true时,Video.js player将拥有流体大小。换句话说,它将按比例缩放以适应其容器。 sources: [ { type: 'application/x-mpegURL', src: 'https://cdn.letv-cdn.com/2018/12/05/JOCeEEUuoteFrjCg/playlist.m3u8' //你的m3u8地址(必填) } ], // poster: 'poster.jpg', //你的封面地址 width: "720", height:"480", notSupportedMessage: '此视频暂无法播放,请稍后再试' ,//允许覆盖Video.js无法播放媒体源时显示的默认信息。 controlBar: { timeDivider: true, durationDisplay: true, remainingTimeDisplay: false, fullscreenToggle: true //全屏按钮 } } }; }, components: {    videoPlayer }, methods: { //事件 } 
}; 
</script> <style scoped> .player{ width: 720px; height: 480px; margin:100px auto;} 
</style> 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/264580.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

ThingWorx 9.2 Windows安装

参考官方文档安装配置 1 PostgreSQL 13.X 2 Java, Apache Tomcat, and ThingWorx PTC Help Center 参考这里安装 数据库 C:\ThingworxPostgresqlStorage 设置为任何人可以full control 数据库初始化 pgadmin4 创建用户twadmin并记录口令password Admin Userpostgres Thin…

基础宠物商店管理系统(Java)大一程序设计

一.开发环境 Windows 11 -- JDK 21 -- IDEA 2021.3.3 二.需求 三.代码部分 //创建一个宠物类&#xff0c;被另外两类继承public class Pet {private String name;private int age;private String gender;private double cost0;//买进价格private double sellprice0;//卖出价…

微信小程序制作-背单词的小程序制作

微信小程序–背单词的 好久没有发过文章了&#xff0c;但是不代表着我不去学习了喽&#xff0c;以下是我最近做的东西&#xff0c;前端的UI由朋友设计的&#xff0c;目前这个是前端使用的是微信小程序后端是Python的一个轻量型框架&#xff0c;FastApi&#xff0c;嗯&#xff…

Vue之模板语法

模板语法有两大类&#xff1a; 1.插值语法 2.指令语法 让我为大家介绍一下吧&#xff01; 一、插值语法 功能:用于解析标签体内容。 写法: {{xxx}}&#xff0c;xxx是js表达式&#xff0c;且可以直接读取到data中的所有属性。 举个例子&#xff1a; <!DOCTYPE html> &l…

Faster Transformer

Faster Transformer FasterTransformer包含transformer块的高度优化版本的实现&#xff0c;该块包含编码器和解码器部分。基于高效率的开发语言和工具&#xff1a; C, CUDA, cuBLAS and cuBLASlt支持的模型数据格式&#xff1a;FP32, FP16, BF16, INT8 (limited models) and F…

C现代方法(第27章)笔记——C99对数学计算的新增支持

文章目录 第27章 C99对数学计算的新增支持27.1 <stdint.h>: 整数类型(C99)27.1.1 <stdint.h>类型27.1.2 对指定宽度整数类型的限制27.1.3 对其他整数类型的限制27.1.4 用于整型常量的宏 27.2 <inttype.h>: 整数类型的格式转换(C99)27.2.1 用于格式指定符的宏…

体系化学习运筹学基础算法的实践和总结

文章目录 引言目标设计目标实践文章汇总经验总结一则预告 引言 眨眼间已经12月了&#xff0c;眼看着2023年马上要过完了。 女朋友最近总说&#xff0c;工作以后感觉时间过的好快。事实上&#xff0c;我也是这么认为的。年纪越大&#xff0c;越会担心35岁危机的降临。所以&…

kafka中消息key作用与分区规则关系

在 kafka 2.0.0 的 java sdk 中 <dependency><groupId>org.apache.kafka</groupId><artifactId>kafka_2.12</artifactId><version>2.0.0</version> </dependency> ProducerRecord 中类注释如下 A key/value pair to be sen…

智能优化算法应用:基于郊狼算法3D无线传感器网络(WSN)覆盖优化 - 附代码

智能优化算法应用&#xff1a;基于郊狼算法3D无线传感器网络(WSN)覆盖优化 - 附代码 文章目录 智能优化算法应用&#xff1a;基于郊狼算法3D无线传感器网络(WSN)覆盖优化 - 附代码1.无线传感网络节点模型2.覆盖数学模型及分析3.郊狼算法4.实验参数设定5.算法结果6.参考文献7.MA…

2023/12/10总结

学习 WebSocket 一共四种方法&#xff0c;传递数据是要通过JSON格式传递 前端 onopen 在连接时 onmessage 收到消息时 通常携带参数 event &#xff0c;event.data 是消息 onerror 发生错误时 onclose 关闭连接时 发送消息 需要安装 vue-native-websocket 包 pnpm i vue-n…

stu06-VSCode里的常用快捷键

Alt Z&#xff1a;文字自动换行。当一行的文字太长时&#xff0c;可以使用。或者查看→自动换行Alt Shift ↓ &#xff1a;快速复制当前行到下一行Alt Shift ↑ &#xff1a;快速复制当前行到上一行Alt B&#xff1a;在默认浏览器中打开当前.html文件Ctrl Enter&#xf…

【Unity动画】什么是任意状态(Any state)

&#xff08;Any state&#xff09;可以从某个状态A直接切换到另一个状态 B\C\D\E\F 比如A到C的过渡&#xff0c;直接设置从Any state 到C的过渡线触发参数即可。而不需要让A到C直接在连接&#xff0c;同样&#xff0c;B到C之间也无需直接链接。 这样设计是在每一个动画之间都…