云速建站_【云速建站】视频播放专题

【小宅按】 本文将逐一演示云速建站支持的几种视频添加方式。

关于视频播放,首先要明确的是出于考虑网站访问用户体验的原因,云速建站上传的文件种类和大小是有限制的。且不支持视频直接上传到建站空间。

视频需要使用外部链接的方式添加。如添加优酷视频链接,华为云视频点播链接等。

视频外链添加两种方式:

1) 视频URL + 视频模块
在视频源网站找到该视频的URL链接地址,该链接地址必须以.mp4或者.flv结尾,将视频模块拖至页面上,在弹出设置窗口,将URL添加后保存,并预览即可见到效果。

2)包含视频的HTML代码 + 代码模块
拖动代码模块到页面,在弹出窗口粘贴代码,保存HTML源码即可预览效果以下四例,演示当前云速建站支持的几种视频播放方式(效果预览请访问http://www.fallout5.club/video

  • 华为云视频点播服务,这种方式无广告,且可自定义清晰度,大推荐!
  • 优酷视频,外链可能有60秒广告
  • youtube视频,海外播放
  • 全屏背景播放视频

第一例:采用华为云视频点播服务
华为云视频点播服务,这种方式无广告,且可自定义清晰度,需要开通视频点播服务

837ae46267cad8580a9c84ee9a4837b8.png

开通后上传视频,按需转码,(注意:用于页面效果展示的视频视频不要过大,例如通栏背景视频,5M以内为佳。如果是宣传材料视频,大小则不限制)转码后复制.mp4地址

382464027e839f074d4ef2ada9fb833f.png

在云速建站使用视频插件

4ac2e56a6d6de0b4077ea7981140b9cd.png

8bb642dc93a8f76c1fa8d1653a2b689e.png

第二例:采用优酷视频
优酷提供三种视频分享方式,我们使用前两种

4484df963480f73872fddfd51a49e78f.png

1. 复制通用代码方式,使用云速建站代码插件添加视频(外链可能会有60秒广告)

ef0d886663a830e41829892c28924fc2.png

bc719f797e74e39a2e1f93437ae522ef.png

注意:代码方式添加视频在站点开启https传输后将失效,需要在视频链接前修改,添加s

7a27b5e59750609f63e1c00ca79dbd7a.png

2. 复制flash代码方式,使用云速建站视频插件添加视频(外链可能会有60秒广告)

37fb4a4f0a64835447f5e85d346c6942.png

第三例:Youtube视频
youtube视频也支持多种分享方式

0e4ccadaba2b82cd973132d422081a29.png

1. 复制视频地址方式,使用云速建站视频插件添加视频(海外播放)
!注意! youtube视频点击即播放,很难打开视频插件设置,在选取视频控件属性的时候鼠标尽量点击视频边缘

d2ebc74ade023f9d21136ec081184549.png

2. 复制embed代码方式,使用云速建站代码插件添加视频(海外播放)

07478cecd59a1e7a58551b8442a071c2.png

7431f3d35e22477a84717123823398f8.png

第四例:全屏背景播放视频
①.拖出通栏插件,点击属性,可以勾选背景视频。通栏背景和内容背景均可设置视频,通栏背景视频的最大宽度是页面宽度,而内容背景视频的最大宽度是内容宽度。
Ps:当勾选了背景视频后,无法设置页脚元素和固定显示

8126ceea888614779869e0be99b55d45.png

②.勾选之后,输入视频地址,注意视频支持格式
自动播放:不勾选,视频将出现控件,需手动控制播放
循环播放:不勾选,视频只播放一次即自动停止
透明度:可以调整视频的透明度,并且可设置遮罩颜色
背景:设置通栏的背景,原本的设置项

2b715db0fca84535003a8b341a450b2e.png

下面设置一个通栏背景视频,并预览效果

bdcab48fb4e267ab425a2273216cc74f.png

预览效果,在网站页面中左右打满。

77181a0829759b9ba71d0f93ce0eb00e.png

另一种内容背景播放模式

61b283f10b6f8ea5bfe19f46f732f0f9.png

会根据视频大小播放剧中

5a0bf174ae63d50a8edb77e0b0e25fdb.png

最终效果预览请参考http://www.fallout5.club/video

更多精彩内容,请滑至顶部点击右上角关注小宅哦~

0bcb065be4646521b30e808a13c66f0b.png

来源:华为云社区 作者:JohnnyKou

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值