标签：width prevent script ntb 就是 top stat VID 拼接
最近自己在重新学习html5新特性，了解到有视频标签和拖动标签，于是自己用这两个特性写了一个小demo，主要功能就是可以通过拖动视频来直接播放。效果图如下：
页面使用了<video>标签和drag，drop方法。左侧是动态渲染的视频列表，里面title包含着视频路径信息，右侧是视频播放器。
js代码：
// 拖拽开始
function dragStart() {
let e = window.event;
e.dataTransfer.setData(‘video‘, e.target.title);
}
// 拖拽结束
function dragover() {
window.event.preventDefault();
}
// 拖拽结束放置
function drop() {
let e = window.event;
e.preventDefault();
// 获取到事件
let src = e.dataTransfer.getData(‘video‘);
document.getElementById(e.target.id).src = src;
}
// 页面加载完成渲染歌曲列表
var COUNT = 8;
window.onload = () => {
let innerHtml = ‘‘, src = ‘‘, name = ‘‘;
for (let i = 0; i < COUNT; i++) {
name = ‘shipin(‘ + (i + 1) + ‘)‘;//拼接视频名称
src = ‘static/shipin(‘ + (i + 1) + ‘).mp4‘;//拼接视频路径
innerHtml += `<li title=${src} draggable=${true} id=‘drag${i}‘ ondragstart=javascript:dragStart()>${name}</li>`
}
document.getElementById(‘ul‘).innerHTML = innerHtml;
}
如上，定义了拖拽开始函数dragstart()，用于处理左侧被拖动元素的ondragstart事件，该函数把e.target.title保存起来，title就是被拖动视频的路径。然后是dragover()函数，用于拖动结束后阻止默认的事件，以便被拖动的元素能放置在video标签中。然后是drop()函数，用于video标签，即被放置元素中，该函数在放置时候执行，拖动结束后将会用getData获取之前保存起来的title路径，然后利用gerElementById.src把路径赋值给video标签。实现视频的拖动播放。
页面代码：
<div class="main">
<!-- 左侧视频数据列表 -->
<div class="aside">
<ul id="ul"></ul>
</div>
<!-- 右侧播放器 -->
<div class="play">
<video id="video" ondrop="drop()" ondragover="dragover()" src="" controls="controls" autoplay=‘autoplay‘></video>
</div>
</div>
主要难点：
1.如何在动态拼接的多个li标签中调用定义的dragstart函数，这里使用了语句：ondragstart=javascript:dragStart()。
2.如何获取li的event对象，这里没有直接把event作为对象从dragstart方法传过去，会报错，而是在函数中通过window.event获得该事件对象。
标签：width prevent script ntb 就是 top stat VID 拼接
原文地址：https://www.cnblogs.com/oujiamin/p/9154802.html
