Use issues that need attention:
1. Multiple formats of video
You can't only have MP4 format, you must import Ogg format video, otherwise it will be incompatible and error will be reported on Firefox. Recommend a good video format converter, download address: http://download.csdn.net/detail/danhuan/9905942
2. Introduce html5media.js
Introducing html5media.js to make it compatible with IE
3. If you want to set the width of the video to percentage % to fill the container adaptively, note that the property width of the video cannot be a percentage %
Note that width = "100%" cannot be added directly to the <video> label, because the width attribute only supports pixel values, not percentages. Although it <video width = "100%"> can be displayed correctly in the Google Firefox browser, it will be incompatible in IE, resulting in the video cannot be played. If you want to set the video width to %% adaptively to fill the container, you can set it through internal styles <style>...</style>or external styles <link rel="stylesheet" href="CSS文件路径" />, but you cannot set styles through inline style="width:100%" styles, otherwise it will not be compatible with IE.
4. If the video has a fixed width and height, it can be set directly in the properties. Be careful not to add the unit px, otherwise IE will not be compatible.
The correct example is as follows:
<video width="1000" height="500" controls autoplay="true" loop="true" preload="auto">
An example of the error is as follows:
<video width="1000px" height="500px" controls autoplay="true" loop="true" preload="auto">
Source: https://github.com/danhuan/video-demo
//----------------------------------------------------------------------------------------------------------------------------
Implement pause playback:
<video src="xxx" class="myVideo" ></video>
<script>
$(function(){
$(".myVideo").click(function(){
var myVideo = $(this)[0];
if(myVideo.paused){
myVideo.play()
}else{
myVideo.pause();
}
});
})
</script>