无法在 <video> 中停止加载首次从 Hls() 加载的 m3u8 视频。

huangapple
go评论84阅读模式
英文:

Can not stop video in <video> while loading first time m3u8 from Hls()

问题

  1. 目前，我正在尝试在我的Web应用程序中使用HlsJS播放m3u8视频，但无论我加载视频时是否使用autoplay属性，它都会在第一次加载时开始播放。
  3. 以下是我的JavaScript代码：
  5. const videoElement = document.getElementById(<unique-id>)
  7. const hls = new Hls()
  8. hls.loadSource(src)
  9. hls.attachMedia(videoElement)
  11. hls.on(Hls.Events.MEDIA_ATTACHED, function () {
  12.     console.log('media attached')
  13. })
  15. hls.on(Hls.Events.MANIFEST_PARSED, function (event, data) {
  16. })
  18. hls.on(Hls.Events.MANIFEST_LOADED, function () {
  19. })

请注意，我使用了此hls文件：https://cdnjs.cloudflare.com/ajax/libs/hls.js/1.4.3/hls.min.js

以下是HTML标签的代码：

  1. <video
  2.   id={uniqueKey}
  3.   muted={muted}
  4.   loop={loop}
  5.   height='100%'
  6.   width='100%'
  7.   playsInline
  8. />

我还尝试添加事件侦听器以停止视频，但它也不起作用：

  1. videoElement.addEventListener('canplay', () => {
  2.     videoElement.pause()
  3. })

在这里，我希望在加载视频时m3u8视频会停止播放。

英文:

Currently, I am trying use HlsJS to play m3u8 video in my web application but when I load video irrespective of autoplay attribute it starts playing when I load it first time.

Here is my javascript code:

  1. const videoElement = document.getElementById(&lt;unique-id&gt;)
  4. const hls = new Hls()
  5. hls.loadSource(src)
  6. hls.attachMedia(videoElement)
  8. hls.on(Hls.Events.MEDIA_ATTACHED, function () {
  9.     console.log(&#39;media attached&#39;)
  10. })
  12. hls.on(Hls.Events.MANIFEST_PARSED, function (event, data) {
  13. })
  15. hls.on(Hls.Events.MANIFEST_LOADED, function () {
  16. })

Note here I have used this hls file : https://cdnjs.cloudflare.com/ajax/libs/hls.js/1.4.3/hls.min.js

Below code is of html tag :

  1. &lt;video
  2.   id={uniqueKey}
  3.   muted={muted}
  4.   loop={loop}
  5.   height=&#39;100%&#39;
  6.   width=&#39;100%&#39;
  7.   playsInline
  8. /&gt;

I also tried add eventListener as and stopping video but it also does not work :

  1. videoElement.addEventListener(&#39;canplay&#39;, () =&gt; {
  2. videoElement.pause()
  3. })

Here, I am expecting m3u8 video gets stopped when I load the video.

答案1

得分: 1

你尝试过覆盖hlsOptions的autoStartLoad吗？

英文:

Did you try to override hlsOptions autoStartLoad?

答案2

得分: 0

我已添加海报到视频上并启用了控件，如果不需要，请删除它。

  1. <video id="myVideo" muted loop height="50%" width="50%" playsinline controls></video>
  2. <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
  3. <script>
  4.     document.addEventListener('DOMContentLoaded', function () {
  5.         const videoElement = document.getElementById('myVideo');
  6.         const hls = new Hls();
  8.         hls.loadSource('https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8');
  9.         hls.attachMedia(videoElement);
  11.         hls.on(Hls.Events.MEDIA_ATTACHED, function () {
  12.             console.log('Media attached');
  13.             extractPosterFromVideo(videoElement);
  14.         });
  16.         hls.on(Hls.Events.MANIFEST_PARSED, function () {
  17.             videoElement.pause();
  18.             console.log('Manifest parsed');
  19.         });
  21.         hls.on(Hls.Events.MANIFEST_LOADED, function () {
  22.             videoElement.pause();
  23.             console.log('Manifest loaded');
  24.         });
  26.         // Code is for Poster/Thumbnail of the video at 3 seconds scene
  28.         function extractPosterFromVideo(video) {
  29.             // Seek to the desired time in seconds
  30.             const seekTime = 3;
  31.             video.currentTime = seekTime;
  33.             const canvas = document.createElement('canvas');
  34.             const context = canvas.getContext('2d');
  36.             // Set the canvas size to match the video dimensions
  37.             canvas.width = video.videoWidth;
  38.             canvas.height = video.videoHeight;
  39.             video.addEventListener('seeked', function () {
  40.                 context.drawImage(video, 0, 0, canvas.width, canvas.height);
  41.                 const imageData = canvas.toDataURL();
  42.                 video.setAttribute('poster', imageData);
  43.             });
  44.         }
  46.     });
  47. </script>

Cheers!

英文:

Let me know if this is what you mean, I've added poster on the vide and enable the controls, just delete it if not needed.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-html -->

  1. &lt;video id=&quot;myVideo&quot; muted loop height=&quot;50%&quot; width=&quot;50%&quot; playsinline controls&gt;&lt;/video&gt;
  2. &lt;script src=&quot;https://cdn.jsdelivr.net/npm/hls.js@latest&quot;&gt;&lt;/script&gt;
  3. &lt;script&gt;
  4. document.addEventListener(&#39;DOMContentLoaded&#39;, function () {
  5. const videoElement = document.getElementById(&#39;myVideo&#39;);
  6. const hls = new Hls();
  7. hls.loadSource(&#39;https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8&#39;);
  8. hls.attachMedia(videoElement);
  9. hls.on(Hls.Events.MEDIA_ATTACHED, function () {
  10. console.log(&#39;Media attached&#39;);
  11. extractPosterFromVideo(videoElement);
  12. });
  13. hls.on(Hls.Events.MANIFEST_PARSED, function () {
  14. videoElement.pause();
  15. console.log(&#39;Manifest parsed&#39;);
  16. });
  17. hls.on(Hls.Events.MANIFEST_LOADED, function () {
  18. videoElement.pause();
  19. console.log(&#39;Manifest loaded&#39;);
  20. });
  21. //   Code is for Poster/Thumbnail of the video at 3 seconds scene
  22. function extractPosterFromVideo(video) {
  23. // Seek to the desired time in seconds
  24. const seekTime = 3;
  25. video.currentTime = seekTime;
  26. const canvas = document.createElement(&#39;canvas&#39;);
  27. const context = canvas.getContext(&#39;2d&#39;);
  28. // Set the canvas size to match the video dimensions
  29. canvas.width = video.videoWidth;
  30. canvas.height = video.videoHeight;
  31. video.addEventListener(&#39;seeked&#39;, function() {
  32. context.drawImage(video, 0, 0, canvas.width, canvas.height);
  33. const imageData = canvas.toDataURL();
  34. video.setAttribute(&#39;poster&#39;, imageData);
  35. });
  36. }
  37. });
  38. &lt;/script&gt;

<!-- end snippet -->

Cheers!

huangapple
  • 本文由 发表于 2023年5月17日 16:31:52
  • 转载请务必保留本文链接：https://go.coder-hub.com/76270049.html
  • hls.js
  • html
  • http-live-streaming
  • m3u8
  • web
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定