How to insert a video in a web page

I want to insert video in web pages from the Internet search about the following two ways:

1. HTML5 is a built-in label, the label can be applied to many of the browser, but the format of the video have high demands, if you are MP4 video format, then ask your coding must be the AVC (H264 )of. Suggestions to change the encoding video using the "Format Factory" software. Why not, it is a convenient figure!

2. The second way to use the label. Similarly with the above
   

And even get that done these codes, there is a problem that may occur on the video:
First video tags only support MPEG4, Ogg, WebM three video formats, browser support as follows:

However, these three video format video label is specific requirements

Ogg = + Vorbis with Theora video encoder audio encoder
MPEG4 = + AAC encoding with H.264 video coding audio
WebM = VP8 video coding with + Vorbis audio encoding

But I Dounong which I finished but I still can not directly use the video tag to play this video, mainly the problem is: You can only play the video but no sound, video local playback is normal.

The problem has been resolved, through constant look and finally found to be misled by online tutorials, I do not need to add a tag attribute, the following functions:

This is the discovery of new problems, there are two properties in the video tab H5, respectively autoplay and muted, these two properties are in conflict:

autoplay AutoPlay Policies
chrome66 and higher versions do not allow media play automatically.
safari stop autoplay video.

safari prevent automatic playback
for the user experience, consider saving traffic, the mobile terminal disable automatic playback
opera prevent autoplay

Solving strategies Reference:

1. Chrome autoplay-policy
2. safari
3. opera autoplay
   AutoPlay Policies:
   autoplay always allowed.

User interaction has produced (tap the touch sliding, etc. ...), here it refers to the interaction as long as the user has a page with the operation, instead of saying that we must go to the user clicks on audio or video player

Authorization to use iframe Autoplay
chrome improve MEI Index (?)
Mobile end users to add sites to the home screen (not tried)

First, the video (video)
mute autoplay always allowed.
After testing, mute video element can be played automatically. After adding muted audio elements can not be played automatically.
So video element allows it to play automatically by adding a muted property, and then prompts the user to turn on the sound.

Second, the audio (audio)
using the Web Audio API to play a sound.
After review found that this is a very powerful voice processing API, you can achieve a lot of sound effects (sound reinforcement, sound shrink, fade, etc.), be learned.

Third, the audio and video (audio + video)
user interaction (clicks, touch slide operation, etc.), the use .paly () method to play.
Note: Users no interaction before calling play () will throw an exception
use permit iframe Autoplay.

Fourth, the browser / parameter settings chrome - developers switch settings, change chrome auto-play strategy. Go to: ** chrome: // flags / # autoplay-policy **, ** Autoplay policy ** switch settings. safari - [safari official website] (https://www.apple.com/cn/safari/) Tip: You can enter a single site set up Safari browser, automatically enabled media player. Solution:

Use Web Audio API to play a sound. Not be used directly autoplay autoplay. Use .play () method to play.
video.play () and audio.play () return promise. Will not prohibited after playing resolve, ban will reject.
video and audio can be called upon user interaction (click, touch, tap, etc.) .play () playback, video can also play the muted.
/ Video.play () Returns a promise, is not prohibited resolve, prohibiting the Reject / Video = the let
document.getElementById ( "Video"); the let Audio =
document.getElementById ( "Audio"); the let videoPlay Video.play = ( ); the let
AudioPlay audio.play = ();

videoPlay.then (() => {
the console.log ( 'auto-play');}) the catch ((ERR) => {.
the console.log (ERR);
the console.log ( "Auto-play");
video elements can silence after the play, prompting the user to turn on the sound
video.muted = to true;
Video.play ();
can also call .play () after user interaction
...});

audioPlay.then (() => {
the console.log ( 'auto-play');}) the catch ((ERR) => {.
the console.log (ERR);
the console.log ( "Auto-play");
// audio elements only call .play () after user interaction
// ...});

H5 Webview Android
Android 4.2 Webview need to add a user gesture to trigger the playback of audio and video switching, the default is true (requires a user gesture triggers).
The webview This does not require the user to trigger the switch setting:
. MWebview.getSettings () setMediaPlaybackRequiresUserGesture (to false);
the IOS H5 webview
the IOS to the APP webview after setting mediaPlaybackRequiresUserAction allows automatic play.