Regarding video playback, we often encounter it in our development world. In this article, we will share with you the html5 video playback solution. I hope that after learning this chapter, everyone will have a better knowledge of html5 and can also write in html5. Exit video playback function.
As we all know, there are two types of application development: one is the native app and the other is the web app, which is an application accessed through a browser.
html5 has its unique place in the mobile Internet era. Although it has many advantages, it cannot completely replace the native APP. Although the development cost of the native APP is high, its good user experience and API, existing The development of ecological chains, etc. will maintain its long-term prosperity. The two APPs will complement each other and coexist. The cost of learning HTML5 is not high. The essence of H5 is HTML. Programmers who have done web development can master it with a little study.
The main research here is to solve the problem of video playback by applying html5. Adobe has neglected the mobile Internet due to strategic mistakes. Mobile terminals do not support flash well, especially Apple terminals do not support flash (Apple computers and notebooks support flash). Most flash applications on the PC side,
streaming media can have a good interactive experience. In order to play and display videos on mobile devices, we have studied and researched HTML5 in depth. We use HTML5 to play videos directly without plug-ins, and can also play them across platforms.
1. Technical advantages of html5
1 Regarding video playback without plug-ins, you can watch it by clicking
2 Cross-platform, easy to upgrade, easy to maintain, and the development cost is much lower than that of native APP
3 Yes It has good mobile support, supports gestures, local storage and video replay, etc. You can make your website mobile through H5.
4 More concise code, better interaction
5 Support game development
2. HTML5 video playback
PC side still uses flash playback, but the mobile side uses html5 way to do it.
The video tag of html5 only supports three formats: mp4, webm, and ogg. Currently, the latest versions of all mainstream browsers support html5 (except Opera)
H.264 has occupied 80% of the video market. If you use video for mobile applications, it is recommended to compile it into 264 format, which has a good high compression ratio and high image quality.
H.264 is a new digital video coding standard jointly formulated by the Joint Video Team (JVT) jointly established by two organizations. It is both ITU-T's H.264 and ISO/IEC's MPEG-4 Advanced Part 10 of Advanced Video Coding (AVC). Therefore, whether it is MPEG-4 AVC, MPEG-4 Part 10, or ISO/IEC 14496-10, it all refers to H.264.
3. html5 code DEMO
<!doctype html>
<html> <meta http-equiv=Content-Type content="text/html;charset=utf-8">
<script src="JavaScript/jquery-1.7.2.min.js"></script> <script src="JavaScript/jsPlayer.js">
</script>
<script src="JavaScript/dtooltip-min.js"></script>
<link href="CSS/play.css?var=1121" rel="stylesheet" type="text/css">
<script type="text/javascript">function browserRedirect()
var sUserAgent= navigator.userAgent.toLowerCase();
var bIsIpad= sUserAgent.match(/ipad/i) == "ipad";
var bIsIphoneOs= sUserAgent.match(/iphone os/i) == "iphone os";
var bIsMidp= sUserAgent.match(/midp/i) == "midp";
var bIsUc7= sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";
var bIsUc= sUserAgent.match(/ucweb/i) == "ucweb";
var bIsAndroid= sUserAgent.match(/android/i) == "android";
var bIsCE= sUserAgent.match(/windows ce/i) == "windows ce";
var bIsWM= sUserAgent.match(/windows mobile/i) == "windows mobile";
if(bIsAndroid){document.getElementById("a").style.display="block";
document.getElementById("b").style.display="none";
document.getElementById("c").style.display="none";
document.getElementById("d").style.display="none";}
else if
(bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsCE || bIsWM) {document.getElementById("b").style.display="block";
document.getElementById("d").style.display="none";
document.getElementById("a").style.display="none";
document.getElementById("c").style.display="none";}
else if(bIsIpad) {document.getElementById("c").style.display="block";
document.getElementById("a").style.display="none";document.getElementById("b").style.display="none";document.getElementById("d").style.display="none"; }
else {document.getElementById("d").style.display="block";
document.getElementById("a").style.display="none";
document.getElementById("b").style.display="none";
document.getElementById("c").style.display="none";
}}
window.onload=function(){browserRedirect();}
$(document).ready( function(){ var ps=new jsPlayer("700","500","myVideo"); } );
</script> <head><title>测试移动终端</title></head><body><div id="a">
<p>这是安卓手机</p></div><div id="b"><p>这是苹果手机</p>
</div><div id="c"><p>这是ipad</p></div><div id="d">
<p>这是电脑</p></div><div style="width:700px;margin:auto;">
<!--播放器代码开始--> <div class="playContent"> <div class="playScreen">
<video id="myVideo"> <source src="Movie/th264.mp4" type="video/mp4">
</video> </div> <div class="proLines"> <div id="origin" class="arial">00:00:00</div>
<div class="line"> <div class="isPlayLine"> <div class="currentCircle"> </div>
</div> </div> <div id="duration" class="arial"></div> </div> <div class="playBars">
<div class="prevBar"><img src="/static/imghwm/default1.png" data-src="Images/prev.jpg" class="lazy" border="0" id="prev" alt="HTML5 video playback tutorial" ></div>
<div class="startBar"><img src="/static/imghwm/default1.png" data-src="Images/stop.jpg" class="lazy" border="0" id="imgStatus" alt="HTML5 video playback tutorial" ></div>
<div class="nextBar"><img src="/static/imghwm/default1.png" data-src="Images/next.jpg" class="lazy" border="0" id="next" alt="HTML5 video playback tutorial" ></div>
<div class="voiceContent"> <div class="voice"> <img src="/static/imghwm/default1.png" data-src="Images/voice.jpg" class="lazy" id="voiceImg" border="0" alt="HTML5 video playback tutorial" > </div>
<div class="voiceline"> <div class="voicekuai">
</div> </div> </div> </div> </div>
<!--播放器代码结束--></div>
</body>
</html>4. HTML5 development
Html5 browser support
Most browsers support html5 (except opera mini)
Data source: http://caniuse.com/#cats=HTML5
mp4 video support
The mainstream supports mp4 (except opera)
Data source: http://caniuse.com/#feat=video
The above content is about the html5 video playback solution, I hope Can help everyone.
Related recommendations:
How to write a teaching video player
html5 video playback tutorial example
Detailed introduction to HTML5 video playback
The above is the detailed content of HTML5 video playback tutorial. For more information, please follow other related articles on the PHP Chinese website!
HTML5 Features: The Core of H5May 04, 2025 am 12:05 AMThe core features of HTML5 include semantic tags, multimedia support, form enhancement, offline storage and local storage. 1. Semantic tags such as, improve code readability and SEO effect. 2. Multimedia support simplifies the process of embedding media content through and tags. 3. Form Enhancement introduces new input types and verification properties, simplifying form development. 4. Offline storage and local storage improve web page performance and user experience through ApplicationCache and localStorage.
H5: Exploring the Latest Version of HTMLMay 03, 2025 am 12:14 AMHTML5isamajorrevisionoftheHTMLstandardthatrevolutionizeswebdevelopmentbyintroducingnewsemanticelementsandcapabilities.1)ItenhancescodereadabilityandSEOwithelementslike,,,and.2)HTML5enablesricher,interactiveexperienceswithoutplugins,allowingdirectembe
Beyond Basics: Advanced Techniques in H5 CodeMay 02, 2025 am 12:03 AMAdvanced tips for H5 include: 1. Use complex graphics to draw, 2. Use WebWorkers to improve performance, 3. Enhance user experience through WebStorage, 4. Implement responsive design, 5. Use WebRTC to achieve real-time communication, 6. Perform performance optimization and best practices. These tips help developers build more dynamic, interactive and efficient web applications.
H5: The Future of Web Content and DesignMay 01, 2025 am 12:12 AMH5 (HTML5) will improve web content and design through new elements and APIs. 1) H5 enhances semantic tagging and multimedia support. 2) It introduces Canvas and SVG, enriching web design. 3) H5 works by extending HTML functionality through new tags and APIs. 4) Basic usage includes creating graphics using it, and advanced usage involves WebStorageAPI. 5) Developers need to pay attention to browser compatibility and performance optimization.
H5: New Features and Capabilities for Web DevelopmentApr 29, 2025 am 12:07 AMH5 brings a number of new functions and capabilities, greatly improving the interactivity and development efficiency of web pages. 1. Semantic tags such as enhance SEO. 2. Multimedia support simplifies audio and video playback through and tags. 3. Canvas drawing provides dynamic graphics drawing tools. 4. Local storage simplifies data storage through localStorage and sessionStorage. 5. The geolocation API facilitates the development of location-based services.
H5: Key Improvements in HTML5Apr 28, 2025 am 12:26 AMHTML5 brings five key improvements: 1. Semantic tags improve code clarity and SEO effects; 2. Multimedia support simplifies video and audio embedding; 3. Form enhancement simplifies verification; 4. Offline and local storage improves user experience; 5. Canvas and graphics functions enhance the visualization of web pages.
HTML5: The Standard and its Impact on Web DevelopmentApr 27, 2025 am 12:12 AMThe core features of HTML5 include semantic tags, multimedia support, offline storage and local storage, and form enhancement. 1. Semantic tags such as, etc. to improve code readability and SEO effect. 2. Simplify multimedia embedding with labels. 3. Offline storage and local storage such as ApplicationCache and LocalStorage support network-free operation and data storage. 4. Form enhancement introduces new input types and verification properties to simplify processing and verification.
H5 Code Examples: Practical Applications and TutorialsApr 25, 2025 am 12:10 AMH5 provides a variety of new features and functions, greatly enhancing the capabilities of front-end development. 1. Multimedia support: embed media through and elements, no plug-ins are required. 2. Canvas: Use elements to dynamically render 2D graphics and animations. 3. Local storage: implement persistent data storage through localStorage and sessionStorage to improve user experience.
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
SublimeText3 Linux new version
SublimeText3 Linux latest version
Dreamweaver CS6
Visual web development tools
Dreamweaver Mac version
Visual web development tools
SecLists
SecLists is the ultimate security tester's companion. It is a collection of various types of lists that are frequently used during security assessments, all in one place. SecLists helps make security testing more efficient and productive by conveniently providing all the lists a security tester might need. List types include usernames, passwords, URLs, fuzzing payloads, sensitive data patterns, web shells, and more. The tester can simply pull this repository onto a new test machine and he will have access to every type of list he needs.
VSCode Windows 64-bit Download
A free and powerful IDE editor launched by Microsoft
