html5.0 Learning Record (i)--draggable video player

Recently re-learning HTML5 new features, learn to have video tags and drag tags, so they wrote a small demo with these two features, the main function is to drag the video to play directly. As follows:

　　

The page uses the <video> tags and drag,drop method. On the left is a dynamically rendered video list with the title containing the video path information and the video player on the right.

JS Code:

        Drag to start function DragStart () {Let E = window.event;        E.datatransfer.setdata (' video ', e.target.title);        }//Drag End Function DragOver () {window.event.preventDefault ();            }//Drag End drop function drop () {let E = window.event;            E.preventdefault ();            Get to event let src = e.datatransfer.getdata (' video ');        document.getElementById (e.target.id). src = src;        }//Page load complete render song list var COUNT = 8;            Window.onload = () = {Let innerHtml = ', src = ', name = '; for (Let i = 0; i < COUNT; i++) {name = ' Shipin (' + (i + 1) + ') ';//splicing video name src = ' static /shipin (' + (i + 1) + '). mp4 ';//splicing video path innerHtml + = ' <li title=${src} draggable=${true} id= ' Drag${i} ' on Dragstart=javascript:dragstart () >${name}</li> '} document.getElementById (' ul '). InnerHTML = Innerhtml; }

As above, a drag-and-drop start function DragStart () is defined to handle the ondragstart event of the dragged element on the left, which saves the E.target.title, and the title is the path of the dragged video. The DragOver () function is then used to block the default event after the drag is finished so that the dragged element can be placed in the video tag. Then there is the drop () function, which is used for the video tag, which is placed in the element, the function is executed at the time of placement, and the drag ends with GetData to obtain the previously saved title path, and then uses GERELEMENTBYID.SRC to assign the path to the video tag. Implements the drag playback of the video.

Page code:

    <div class= "main" >        <!--left video data list--        <div class= "aside" >            <ul id= "ul" ></ul >        </div>        <!--right player        --<div class= "Play" >            <video id= "video" ondrop= "Drop () "Ondragover=" DragOver () "src=" "controls=" Controls "autoplay= ' AutoPlay ' ></video>        </div>    </div>

Main difficulties:

1. How to invoke the defined DragStart function in multiple Li tags for dynamic stitching, where the statement is used: Ondragstart=javascript:dragstart ().

2. How to get the event object of Li, here does not directly pass the event as an object from the DragStart method passed, will error, but in the function through window.event to obtain the event object.

html5.0 Learning Record (i)--draggable video player