hlsvod.html 1.1 KB

12345678910111213141516171819202122232425262728293031
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Title</title>
  6. </head>
  7. <body>
  8. <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
  9. <!-- Or if you want a more recent canary version -->
  10. <!-- <script src="https://cdn.jsdelivr.net/npm/hls.js@canary"></script> -->
  11. <video id="video"></video>
  12. <script>
  13. var url = 'http://cloudvod1.oss-cn-shenzhen.aliyuncs.com/FTSLL8HM437Z38WU111A/vod4/2018121001/1543902118/1543902118.m3u8?Signature=7V5EbsWhhxVF4HVzw%2BIGEZo67fk%3D&OSSAccessKeyId=LTAIyMkGfEdogyL9&x-oss-process=hls%2Fsign&Expires=1544780759'
  14. var video = document.getElementById('video');
  15. if (Hls.isSupported()) {
  16. var hls = new Hls();
  17. hls.loadSource(url);
  18. hls.attachMedia(video);
  19. hls.on(Hls.Events.MANIFEST_PARSED, function () {
  20. video.play();
  21. });
  22. }
  23. else if (video.canPlayType('application/vnd.apple.mpegurl')) {
  24. video.src = url;
  25. video.addEventListener('loadedmetadata', function () {
  26. video.play();
  27. });
  28. }
  29. </script>
  30. </body>
  31. </html>