Maison > Article > interface Web > Comment utiliser Vue combiné avec Video.js pour lire des vidéos m3u8
Cette fois, je vais vous montrer comment utiliser Vue combinée avec Video.js pour lire des vidéos m3u8. Quelles sont les précautions concernant l'utilisation de Vue combinée avec Video.js pour lire des vidéos m3u8. cas pratique. Jetons un coup d'oeil.
Tout d'abord, nous devons installer les dépendances liées à video.js dans le projet vue.
npm install --save video.js npm install --save videojs-contrib-hls
Ensuite, nous devons introduire le fichier css de videojs, par exemple, dans main.js
import 'video.js/dist/video-js.css'
Ensuite, nous introduisons l'objet js
sur la page où la vidéo doit être lue.import videojs from 'video.js' import 'videojs-contrib-hls'
Spécifiez un conteneur vidéo, par exemple :
<video id="my-video" class="video-js vjs-default-skin" controls preload="auto" poster="../assets/video.png"> <source src="http://127.0.0.1:7086/aaa/213/stream/1.m3u8" type="application/x-mpegURL"> </video>
Enfin, nous initialisons le lecteur dans le nœud monté :
videojs('my-video', { bigPlayButton: false, textTrackDisplay: false, posterImage: true, errorDisplay: false, controlBar: true }, function () { this.play() })
Vidéo m3u8 dans Video.js Changement de clarté
Code de test complet
<!DOCTYPE HTML> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>视频控制</title> <link href="https://unpkg.com/video.js/dist/video-js.css" rel="external nofollow" rel="stylesheet"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script> <script src="https://unpkg.com/video.js/dist/video.js"></script> <script src="https://unpkg.com/videojs-contrib-hls/dist/videojs-contrib-hls.js"></script> </head> <body> <video id="my_video_1" class="video-js vjs-default-skin" controls preload="auto" width="640" height="268" data-setup='{}'> <source src="http://localhost/video/c/1928.m3u8" type="application/x-mpegURL"> </video> <br/> </body> <script type="text/javascript"> window.onload=function(){ var videoPanelMenu = $(".vjs-fullscreen-control"); videoPanelMenu.before('<p class="vjs-subs-caps-button vjs-menu-button vjs-menu-button-popup vjs-control vjs-button" aria-live="polite" aria-expanded="false" aria-haspopup="true">' + '<p class="vjs-menu" role="presentation">' + '<ul class="vjs-menu-content" role="menu">' + '<li class="vjs-menu-item" tabindex="-1" role="menuitemcheckbox" onclick="changeVideo(1)">普通</li>' + '<li class="vjs-menu-item" tabindex="-1" role="menuitemcheckbox" onclick="changeVideo(2)">标清 </li>' + '<li class="vjs-menu-item" tabindex="-1" role="menuitemcheckbox" onclick="changeVideo(3)">高清 </li>' + '</ul></p>' +' <button class="vjs-subs-caps-button vjs-control vjs-button" type="button" aria-live="polite" title="清晰度切换" aria-disabled="false">' +' <span aria-hidden="true" class="vjs-icon-placeholder"></span><span class="vjs-control-text">清晰度切换</span>' +' </button>' +'</p>' ); var obj={tag:false,ctime:0}; window.obj=obj; var myPlayer=videojs.getPlayers()['my_video_1']; myPlayer.on("timeupdate", function(){ if(window.obj.tag){ videojs("my_video_1").currentTime(window.obj.ctime) videojs("my_video_1").play(); window.obj.tag=false; } //视频打点 var ctime_=videojs("my_video_1").currentTime().currentTime(); if(ctime_==60){ videojs("my_video_1").currentTime(ctime_+1); //do something } }); } function changeVideo(type){ var ctime=videojs("my_video_1").currentTime(); if(type==1){ videojs("my_video_1").src([{type: "application/x-mpegURL", src: "http://localhost/video/LD/1928.m3u8" }]); videojs("my_video_1").play(); } if(type==2){ videojs("my_video_1").src([{type: "application/x-mpegURL", src: "http://localhost/video/C/1928.m3u8" }]); videojs("my_video_1").play(); } if(type==3){ videojs("my_video_1").src([{type: "application/x-mpegURL", src: "http://localhost/video/HD/1928.m3u8" }]); videojs("my_video_1").play(); } window.obj.ctime=ctime; window.obj.tag=true; } </script> </html>
Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour en savoir plus. informations passionnantes, veuillez prêter attention aux autres articles connexes sur le site Web PHP chinois !
Lecture recommandée :
Comment utiliser le code Yuansheng JS pour implémenter le champ de recherche Baidu
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!