Shulou(Shulou.com)06/01 Report--

This article mainly introduces the relevant knowledge of "the method of video audio drag in HTML5". The editor shows you the operation process through the actual case. The operation method is simple, fast and practical. I hope this article "the method of video audio drag in HTML5" can help you solve the problem.

Html5 Video video:

Currently, video supports three video formats:

Ogg = Ogg files with Theora video encoding and Vorbis audio encoding are currently supported by firefox 3.5, Opera 10.5, Opera, 5.0, Chrome 5.0.

MPEG4 = MPEG4 files with H.264 video encoding and AAC audio encoding currently IE9.0+,Chrome5.0+,Safari 3.0 + supports this format

WebM = WebM files with VP8 video encoding and Vorbis audio encoding are currently supported by Firefox 4.0, Opera, 10.6, and Chrome 6.0 +.

That is to say, at present, all the above formats are supported by Chrome 6.0 + or above. IE only supports MPEG4 format or version 9.0 is required. The same support route as IE is that Safari version 3.0 and above only supports MPEG4.

Firefox and Opera follow the same route and do not support MPEG4, but support Ogg format and WebM format respectively

To sum up:

The browser that comes with the operating system supports MPEG 4

Browsers built by search giants fully support it.

Third-party browsers Firefox and Opera do not support MPEG 4

Displaying a video in html5 is as simple as adding:

Or:

Your browser does not support the video tag.

The controls above is familiar with adding playback, pause and volume controls

The content between and is displayed by browsers that do not support video elements

Second, you can also specify the width and height of the video:

Your browser does not support the video tag.

In order to adapt to multiple browsers, you can guess that when adapting, the browser will use the first recognized format:

Your browser does not support the video tag.

Video combined with DOM can control video well, and you can use var videotest = document.getElementById ("video_name") directly in the tag.

After you find the video control, you can use its method to play and pause the operation, such as if (videotest.paused) {videotest.paly ()}. You can use its property pause if it is paused.

State, call the play () method to play.

HTML5 Audio audio:

For audio support, html5 also provides support in three formats:

Ogg Vorbis

MP3

Wav

The only difference is that Chrome3.0 does not support Wav yet, while Safari supports Wav format in 3. 0. This comparison is quite easy to remember, but really

I don't know what's the use of remembering this? = _! (examination syndrome)

The code for playing audio and video in html5 is also similar, except that the label has been changed a little bit:

The control property is also used to add playback, pause, and volume controls.

The direct content of the control is also an aid for browsers that do not support audio elements. It is agreed between tags to allow multiple source elements, source elements can connect different audio files, browsers or

Use the first recognized format:

Your browser does not support the audio tag.

HTML5 drag and drop:

Drag and drop is part of the standard in HTML5, and any element can be dragged and dropped.

Internet Explorer 9, Firefox, Opera 12, Chrome, and Safari 5 support drag and drop.

Note: drag and drop is not supported in Safari 5.1.2.

You don't have to think that it has to be done in combination with JavaScript.

First, to make the element draggable, set the draggable property to true

Drag what ondragstart and setData ()

The target element you dragged to:

JavaScript wrote:

/ / triggered when dragged, used to set the data type (text type) and value (id of the control) to drag and drop

Function drag (ev) {

Ev.dataTransfer.setData ("Text", ev.target.id)

}

/ / handle the default placement event of the target element

Function allowDrop (ev) {

Ev.preventDefault ()

}

/ / when you put it to the target location, add the dragged data to the target location

Function drop (ev) {

Ev.preventDefault ()

Var data = ev.dataTransfer.getData ("Text")

Ev.target.appendChild (document.getElementById (data))

}

Ev.dataTransfer.getData ("Text") is used for data placement and acquisition. The parameter is the type of data.

Ev.dataTransfer.setData ("Text", ev.target.id)

This is the end of the introduction on "the method of video audio drag in HTML5". Thank you for reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.