最近自己在重新学习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获得该事件对象。
html5.0学习记录（一）——可拖动视频播放器
原文地址：https://www.cnblogs.com/oujiamin/p/9154802.html