• Welcome to the world's largest Chinese hacker forum

    Welcome to the world's largest Chinese hacker forum, our forum registration is open! You can now register for technical communication with us, this is a free and open to the world of the BBS, we founded the purpose for the study of network security, please don't release business of black/grey, or on the BBS posts, to seek help hacker if violations, we will permanently frozen your IP and account, thank you for your cooperation. Hacker attack and defense cracking or network Security

    business please click here: Creation Security  From CNHACKTEAM

视频播放平台核心视频播放器


Recommended Posts

视频播放平台vue-core-video-player

核心视频播放器

# vue-核心-视频播放器封装了视频。射流研究…库

# vue-酷睿-视频播放器vue-酷睿-视频播放器-基于vue。j的视频播放器组件

官方文档:https://核心播放器。github。io/vue-core-video-player/zh/入门。超文本标记语言

安装:

# npm安装-保存vue-核心-视频-播放器

# cnpm i vue-core-video-player -S

# -保存相当于构成名词复数保存到配置文件中

image-20220430170546465

主页。射流研究…引入

从" vue-core-视频播放器"导入VueCoreVideoPlayer

Vue.use(VueCoreVideoPlayer) #默认是英文的

默认英语,你如果想成中文就加一个语言

en:英语

zh-CN:简体中文

jp:日本

# 补充:国际化

Vue.use(VueCoreVideoPlayer,{

lang: 'zh-CN '

})

在组建的超文本标记语言中直接使用即可

# vue-核心-视频播放器src='路径/vue-core视频播放器

# 示例:

div id='应用程序'

div class='玩家容器'

视频播放器./你的视频来源。MP4 '/vue-核心-视频-播放器

/div

/div

# 指定一个科学研究委员会路径即可

路径问题

# 外部路径:

直接指定在科学研究委员会参数下即可

视频播放器src=' http://链接。MX标志。com/vide 003。MP4 '

/vue-core视频播放器

本地路径:

不能直接/xxx/xxx.mp4,无效的。需要使用要求(' . '))

# 例子:

模板

div id='应用程序'

vue-核心视频播放器: src=' a '/vue-core-视频播放器

/div

/模板

脚本

导出默认值{

data(){

返回{

a :要求('。/XXX/XXX。MP4’)

}

}

}

/脚本

分辨率得切换

模板

div id='应用程序'

vue-核心视频播放器: src=' a '/vue-core-视频播放器

/div

/模板

脚本

导出默认值{

data(){

返回{

a: [{

src: 'https

://media.vued.vanthink.cn/sparkle_your_name_am360p.mp4', resolution: 360, }, { src: 'https://media.vued.vanthink.cn/sparkle_your_name_am720p.mp4', resolution: 720, }, { src: 'https://media.vued.vanthink.cn/y2mate.com%20-%20sparkle_your_name_amv_K_7To_y9IAM_1080p.mp4', resolution: 1080 }] } } } </script>

参数指定:

Props Type Example Description
volume number 0.5 视频量 (0-1)
muted boolean true 如果设置true,视频将被静音
cover string './cover.png' 它将显示视频的封面;如果设置autoplay,播放器自动播放成功,该cover属性将不起作用。
title string 'your title' 它将显示视频的标题以获得更好的 SEO
logo string './logo.png' 它将显示您的播放器徽标
loop boolean true 到达视频结尾时,它将自动回到开头
preload string 'metadata' 'none'表示不预加载视频源;'metadata'表示仅获取视频元数据(例如长度)

底部任务栏

# 参数:controls
	- String
    	- “fixed”表示底部仪表板对用户仍然可见。
        - 'auto' 表示当用户和玩家之间没有交互时,底部仪表板将隐藏。
    - Boolean
    	- false表示玩家将隐藏底部仪表板
        - true 表示播放器将显示底部仪表板并像'auto'上面的值一样工作;
# 如果设置autoplay,播放器将尝试播放视频。不同的浏览器有不同的策略来处理自动播放动作。如果播放器失败,它将显示播放按钮供用户触摸。
解释
fixed 始终显示
auto 导航栏不操作后自动消失
true 跟auto一样,导航栏不操作后自动消失
false 始终不显示导航栏
<vue-core-video-player controls="fixed"></vue-core-video-player> 
<vue-core-video-player :controls="false"></vue-core-video-player>

image-20220430175953606

znfpg0yguht3075.png

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now