zoukankan      html  css  js  c++  java
  • 【云速建站】视频播放专题

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

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

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

    视频外链添加两种方式:

    1) 视频URL + 视频模块

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

    2)包含视频的HTML代码 + 代码模块

    拖动代码模块到页面,在弹出窗口粘贴代码,保存HTML源码即可预览效果

    以下四例,演示当前云速建站支持的几种视频播放方式(效果预览请访问http://www.fallout5.club/video

    • 华为云视频点播服务,这种方式无广告,且可自定义清晰度,大推荐!

    • 优酷视频,外链可能有60秒广告

    • youtube视频,海外播放

    • 全屏背景播放视频

    第一例:采用华为云视频点播服务

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

    image.png

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

    image.png

    在云速建站使用视频插件

    image.png

    image.png

    第二例:采用优酷视频

    优酷提供三种视频分享方式,我们使用前两种

    image.png

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

    image.png

    image.png

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

    image.png

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

    image.png

    第三例:Youtube视频

    youtube视频也支持多种分享方式

    image.png

    1. 复制视频地址方式,使用云速建站视频插件添加视频(海外播放)

    !注意! youtube视频点击即播放,很难打开视频插件设置,在选取视频控件属性的时候鼠标尽量点击视频边缘

    image.png

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

    image.png

    image.png

    第四例:全屏背景播放视频

    ①.拖出通栏插件,点击属性,可以勾选背景视频。通栏背景和内容背景均可设置视频,通栏背景视频的最大宽度是页面宽度,而内容背景视频的最大宽度是内容宽度。

    Ps:当勾选了背景视频后,无法设置页脚元素和固定显示

    image.png

    ②.勾选之后,输入视频地址,注意视频支持格式

    自动播放:不勾选,视频将出现控件,需手动控制播放

    循环播放:不勾选,视频只播放一次即自动停止

    透明度:可以调整视频的透明度,并且可设置遮罩颜色

    背景:设置通栏的背景,原本的设置项

    image.png

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

    image.png

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

    image.png

    另一种内容背景播放模式

    image.png

    会根据视频大小播放剧中

    image.png

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

  • 相关阅读:
    Serverless 动态博客开发趟“坑”记
    tsv与csv文件
    zypper
    source、sh、./三种执行方式对脚本变量的影响
    linux nm
    ldconfig
    cpio
    License简介
    rpm之spec文件
    使用rpmbuild制作rpm包
  • 原文地址:https://www.cnblogs.com/huaweicloud/p/11861560.html
Copyright © 2011-2022 走看看