接口和属性介绍
播放器提供了progressMakers属性，是一个数组类型，每一条记录包含offset时间和text打点的内容，还可以包含其他属性，此属性用于告诉播放器进度条打点记录，记录内容属性说明：
名称 类型 说明
offset Number 打点的视频偏移时间，单位：秒
text String 打点的文本信息,默认UI会使用
isCustomized Boolean 是否使用默认UI，不使用设置为true
事件
Aliplayer提供两个事件：鼠标进入进度条上的打点和鼠标离开进度条上的打点。
//鼠标进入进度条上的打点
player.on('markerDotOver', function(data) {
let params = data.paramData，
progressMarker = params.progressMarker, //打点记录信息
left = params.left; //打点的离播放器左边的距离
});
//鼠标离开进度条上的打点
player.on('markerDotOut', function() {
});
相关接口
为了方便打点内容的编辑提供了下面的接口：
接口名称 参数 说明
enterProgressMarker 无 播放器进入打点编辑状态，在seek操作完成时，不会播放视频
exitProgressMarker 无 播放器退出打编辑状态，在seek操作完成时，会继续播放视频
isInProgressMarker 无 是否是打点编辑状态
getProgressMarkers 无 获取打点数组
功能使用
下面会介绍播放器如何辅助用户进行打点信息的生成和维护。
打点Seek操作
用户在生成打点内容的时候，希望在seek操作时，视频不要播放，这时候就需要让播放器进入打点编辑状态，并且在seek完成时，能够得到当前seek到的时间，这样就可以进行时间和内容对应关系的编辑。
创建播放器时，订阅completeSeek事件，代码如下：
player.on('completeSeek',function(e){
console.log('seek完成：'+ e.paramData);
//seek完成：：12.875738146938774 单位为秒
});
如果希望seek结束时画面时静止的，使用的代码如下：
<button click="switchProgressMarker()">开始打点</button>
var switchProgressMarker = ()=>{
if(!player.isInProgressMarker())
{ //如果为进入编辑状态，调用enterProgressMarker
player.enterProgressMarker();
}
else
{
//如果为已经是编辑状态，调用exitProgressMarker退出
player.exitProgressMarker();
}
}
播放显示打点
打点信息通过在创建播放器的时候传给播放器，代码如下：
var player = new Aliplayer({
id: "player-con",
source: "//common.qupai.me/player/qupai.mp4",
width: "100%",
height: "500px",
autoplay: true,
progressMakers:[
{offset:0,text:'阿里视频云端到云到端服务的重要一环'},
{offset:10,text:'除了支持点播和直播的基础播放功能外'},
{offset:20,text:'深度融合视频云业务'},
{offset:30,text:'为用户提供简单、快速、安全、稳定的视频播放服务'},
{offset:40,text:'安装播放器Demo进行体验'},
{offset:50,text:'开发人员请点击SDK下载'}
],
}, function (player) {
console.log("播放器创建成功");
});
块级元素：块级元素占据其父元素（容器）的整个空间，因此创建了一个“块”。通俗的讲： 一个div，它的height:20px; width:20px;,div的大小就是这个高乘以宽的区域。
行内元素： 一个行内元素只占据它对应标签的边框所包含的空间。eg: <span>1</span>:行内元素占据的是1这个内容区的空间。
块级元素与行内元素的区别
块级元素，可以设置宽高（width, height）,可以设置全部方向的margin，padding值（四个方向都可以），会新起一行（即两个块级元素在一起会，变成两行，与块级元素的宽度无关，即使父级div的宽度为100px，子级两个div的宽度只有10px,两个子级div也会上下排列，除非设置了float.）。
第二个div另起了一行。
块级元素具体有：
div、p、h1-h6、form、ul、ol、dl、dt、dd、li、table、tr、td、th、hr、blockquote、address、table、menu、pre
HTML5：header、section、article、footer等等
行内元素：行内元素不能设置width,height,还有不能试试margin的top和bottom但是可以设置margin的left和right，可以设置padding的四个方向。行内元素都是在同一行的。但是有一些特殊的行内元素如input，img等他们是替换元素：<img>、<input>、<textarea>、<select>、<object>，他们可以设置宽高。
下面的元素都是行内元素：
b, big, i, small, tt
abbr, acronym, cite, code, dfn, em, kbd, strong, samp, var
a, bdo, br, img, map, object, q, script, span, sub, sup
button, input, label, select, textarea
BFC:块级格式化：是布局过程中生成块级盒子的区域，也是浮动元素与其他元素的交互限定区域.（通俗讲是实验两栏布局，一栏固定，一栏自适应）还有三栏布局也是同样的原理，下面代码实现的是两栏布局。
注意：
块格式化上下文包含创建它的元素内部的所有内容.
块格式化上下文对浮动定位（参见 float）与清除浮动（参见 clear）都很重要。浮动定位和清除浮动时只会应用于同一个BFC内的元素。浮动不会影响其它BFC中元素的布局，而清除浮动只能清除同一BFC中在它前面的元素的浮动。外边距折叠（Margin collapsing）也只会发生在属于同一BFC的块级元素之间。
实现代码如下：
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div class="container">
<div class=www.dasheng178.com"left">www.fengshen157.com</div>
<div class="main"></div>
</div>
<!-- <div class=www.haomem178.cn "dd">1</div>
<div class="dd">1</div>
<input class="dd" value="1"/>
<input class="dd"/>
<span class="dd">1</span>
<img class="dd"/> -->
</body>
<style type="text/css">
.container{
width: 100%;
height:300px;
padding-left:200px;
}
.left{
left:0;
width:200px;
background: red;
height: 100px;
margin-left:-www.tiaotiaoylzc.com/ 200px;
float: left;
}
.main {
width:100%;
padding-left: 200px;
height:100px;
background: blue;
float: left;
}
/*.dd{
border:1px solid #18E;
margin: 10px;
height:www.mcyllpt.com 200px;
width:300px;
padding:20px;
}*/
</style>
</html>
从块级元素和行内元素的分析到bfc的布局理解
最新推荐文章于 2023-02-22 19:16:57 发布
330
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
