hlsvod.html 1.1 KB

1234567891011121314151617181920212223242526272829303132
  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 url = 'https://apg.oss-cn-shenzhen.aliyuncs.com/testplay/1545101955.m3u8'
  15. var video = document.getElementById('video');
  16. if (Hls.isSupported()) {
  17. var hls = new Hls();
  18. hls.loadSource(url);
  19. hls.attachMedia(video);
  20. hls.on(Hls.Events.MANIFEST_PARSED, function () {
  21. video.play();
  22. });
  23. }
  24. else if (video.canPlayType('application/vnd.apple.mpegurl')) {
  25. video.src = url;
  26. video.addEventListener('loadedmetadata', function () {
  27. video.play();
  28. });
  29. }
  30. </script>
  31. </body>
  32. </html>