html5.0学习记录（一）——可拖动视频播放器

　　最近自己在重新学习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}' οndragstart=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" οndrοp="drop()" οndragοver="dragover()" src="" controls="controls" autoplay='autoplay'></video>
        </div>
    </div>

　　主要难点：

　　1.如何在动态拼接的多个li标签中调用定义的dragstart函数，这里使用了语句：οndragstart=javascript:dragStart()。

　　2.如何获取li的event对象，这里没有直接把event作为对象从dragstart方法传过去，会报错，而是在函数中通过window.event获得该事件对象。

转载于:https://www.cnblogs.com/oujiamin/p/9154802.html