其实电影m3u8源码分享网站的问题并不复杂，但是又很多的朋友都不太了解源代码电影资源，因此呢，今天小编就来为大家分享电影m3u8源码分享网站的一些知识，希望可以帮助到大家，下面我们一起来看看这个问题的分析吧！
BlazorVideoPlayer视频播放器组件
https://www.nuget.org/packages/BootstrapBlazor.VideoPlayer34;//vjs.zencdn.net/7.10.2/video-js.min.css&34;stylesheet&34;https://vjs.zencdn.net/7.10.2/video.js&34;https://unpkg.com/video.js/dist/video.min.js&34;https://unpkg.com/@@videojs/http-streaming/dist/videojs-http-streaming.min.js&34;https://cdnjs.cloudflare.com/ajax/libs/videojs-youtube/2.6.1/Youtube.min.js&34;./app.js&34;/&34;en&34;utf-8&34;viewport&34;width=device-width,initial-scale=1.0&34;~/&34;stylesheet&34;css/bootstrap/bootstrap.min.css&34;css/site.css&34;stylesheet&34;b13video.styles.css&34;stylesheet&34;icon&34;image/png&34;favicon.png&34;//vjs.zencdn.net/7.10.2/video-js.min.css&34;stylesheet&34;typeof(HeadOutlet)&34;ServerPrerendered&34;typeof(App)&34;ServerPrerendered&34;blazor-error-ui&34;Staging,Production&34;Development&34;&34;reload&34;dismiss&34;_framework/blazor.server.js&34;https://unpkg.com/video.js/dist/video.min.js&34;https://unpkg.com/@@videojs/http-streaming/dist/videojs-http-streaming.min.js&34;https://cdnjs.cloudflare.com/ajax/libs/videojs-youtube/2.6.1/Youtube.min.js&34;./app.js&34;my-player&34;video-js&34;auto&34;//vjs.zencdn.net/v/oceans.png&39;{}&34;//vjs.zencdn.net/v/oceans.mp4&34;video/mp4&34;//vjs.zencdn.net/v/oceans.webm&34;video/webm&34;//vjs.zencdn.net/v/oceans.ogv&34;video/ogg&34;vjs-no-js&34;https://videojs.com/html5-video-support/&34;_blank&提供参数,最终代码如下
<videoid=&34;\nclass=&34;\nmuted>\n<pclass=&34;>\nToviewthisvideopleaseenableJavaScript,andconsiderupgradingtoa\nwebbrowserthat\n@-17,3+14,27@@\n</a>\n</p>\n</video>\n
@injectIJSRuntimejsRuntime\n@code{\nprotectedoverrideasyncTaskOnAfterRenderAsync(boolfirstRender)\n{\nif(firstRender)\n{\nawaitjsRuntime.InvokeVoidAsync(&34;,&34;,new\n{\nwidth=600,\nheight=300,\ncontrols=true,\nautoplay=true,\npreload=&34;,\nposter=&34;,\nsources=new[]{\nnew{type=&34;,src=&34;},\nnew{type=&34;,src=&34;}\n}\n});\n}\n}\n\n}\n
调试一下,成功运行就进入下一步.
9.组件化.{最终代码,请大家直接使用CV大法}
Pages\\VideoPlayer.razor
@injectIJSRuntimejsRuntime\n@namespaceBlazor100.Components\n\n<div@ref=&34;>\n<videoid=&34;\nclass=&34;\nmuted\nwebkit-playsinline\nplaysinline\nx-webkit-airplay=&34;\nx5-video-player-type=&34;\nx5-video-player-fullscreen=&34;\nx5-video-orientation=&34;>\n<pclass=&34;>\nToviewthisvideopleaseenableJavaScript,andconsiderupgradingtoa\nwebbrowserthat\n<ahref=&34;target=&34;>\nsupportsHTML5video\n</a>\n</p>\n</video>\n@if(Debug)\n{\n<pre>@info</pre>\n}\n</div>\n
Pages\\VideoPlayer.razor.cs
usingb13video.Pages;\nusingMicrosoft.AspNetCore.Components;\nusingMicrosoft.Extensions.Options;\nusingMicrosoft.JSInterop;\nusingSystem.Text.Json.Serialization;\nusingstaticSystem.Runtime.InteropServices.JavaScript.JSType;\n\nnamespaceBlazor100.Components;\n\npublicpartialclassVideoPlayer:IAsyncDisposable\n{\n[Inject]IJSRuntime?JS{get;set;}\nprivateIJSObjectReference?module;\nprivateDotNetObjectReference<VideoPlayer>?instance{get;set;}\nprotectedElementReferenceelement{get;set;}\nprivateboolinit;\nprivatestring?info;\n\nprivatestringId{get;set;}=Guid.NewGuid().ToString();\n\n///<summary>\n///资源类型\n///</summary>\n[Parameter]\npublicstring?SourcesType{get;set;}\n\n///<summary>\n///资源地址\n///</summary>\n[Parameter]\npublicstring?SourcesUrl{get;set;}\n\n[Parameter]\npublicintWidth{get;set;}=300;\n\n[Parameter]\npublicintHeight{get;set;}=200;\n\n[Parameter]\npublicboolControls{get;set;}=true;\n\n[Parameter]\npublicboolAutoplay{get;set;}=true;\n\n[Parameter]\npublicstringPreload{get;set;}=&34;;\n\n///<summary>\n///设置封面\n///</summary>\n[Parameter]\npublicstring?Poster{get;set;}\n\n[Parameter]\npublicVideoPlayerOption?Option{get;set;}\n\n[Parameter]\npublicboolDebug{get;set;}\n\nprotectedoverrideasyncTaskOnAfterRenderAsync(boolfirstRender)\n{\ntry\n{\nif(firstRender)\n{\nmodule=awaitJS!.InvokeAsync<IJSObjectReference>(&34;,&34;);\ninstance=DotNetObjectReference.Create(this);\n\nOption=Option??newVideoPlayerOption()\n{\nWidth=Width,\nHeight=Height,\nControls=Controls,\nAutoplay=Autoplay,\nPreload=Preload,\nPoster=Poster,\n//EnableSourceset=true,\n//TechOrder=&39;fakeYoutube&39;html5&34;\n};\nOption.Sources.Add(newVideoSources(SourcesType,SourcesUrl));\n\ntry\n{\nawaitmodule.InvokeVoidAsync(&34;,instance,&34;+Id,Option);\n}\ncatch(Exceptione)\n{\ninfo=e.Message;\nif(Debug)StateHasChanged();\nConsole.WriteLine(info);\nif(OnError!=null)awaitOnError.Invoke(info);\n}\n}\n}\ncatch(Exceptione)\n{\nif(OnError!=null)awaitOnError.Invoke(e.Message);\n}\n}\n\nasyncValueTaskIAsyncDisposable.DisposeAsync()\n{\nif(moduleisnotnull)\n{\nawaitmodule.InvokeVoidAsync(&34;,Id);\nawaitmodule.DisposeAsync();\n}\n}\n\n\n///<summary>\n///获得/设置错误回调方法\n///</summary>\n[Parameter]\npublicFunc<string,Task>?OnError{get;set;}\n\n///<summary>\n///JS回调方法\n///</summary>\n///<paramname=&34;></param>\n///<returns></returns>\n[JSInvokable]\npublicvoidGetInit(boolinit)=>this.init=init;\n\n///<summary>\n///JS回调方法\n///</summary>\n///<paramname=&34;></param>\n///<returns></returns>\n[JSInvokable]\npublicasyncTaskGetError(stringerror)\n{\ninfo=error;\nif(Debug)StateHasChanged();\nif(OnError!=null)awaitOnError.Invoke(error);\n}\n\n}\n
Pages\\VideoPlayerOption.cs
usingSystem.Text.Json.Serialization;\n\nnamespaceb13video.Pages\n{\npublicclassVideoPlayerOption\n{\n[JsonPropertyName(&34;)]\npublicintWidth{get;set;}=300;\n\n[JsonPropertyName(&34;)]\npublicintHeight{get;set;}=200;\n\n[JsonPropertyName(&34;)]\npublicboolControls{get;set;}=true;\n\n[JsonPropertyName(&34;)]\npublicboolAutoplay{get;set;}=true;\n\n[JsonPropertyName(&34;)]\npublicstringPreload{get;set;}=&34;;\n\n///<summary>\n///播放资源\n///</summary>\n[JsonPropertyName(&34;)]\npublicList<VideoSources>Sources{get;set;}=newList<VideoSources>();\n\n///<summary>\n///设置封面\n///</summary>\n[JsonPropertyName(&34;)]\npublicstring?Poster{get;set;}\n\n//[JsonPropertyName(&34;)]\n//publicboolEnableSourceset{get;set;}\n\n//[JsonPropertyName(&34;)]\n//publicstring?TechOrder{get;set;}=&39;html5&39;flash&34;;\n\n\n}\n\n\n///<summary>\n///播放资源\n///</summary>\npublicclassVideoSources\n{\npublicVideoSources(){}\n\npublicVideoSources(string?type,string?src)\n{\nthis.Type=type??thrownewArgumentNullException(nameof(type));\nthis.Src=src??thrownewArgumentNullException(nameof(src));\n}\n\n///<summary>\n///资源类型<para></para>video/mp4<para></para>application/x-mpegURL<para></para>video/youtube\n///</summary>\n[JsonPropertyName(&34;)]\npublicstringType{get;set;}=&34;;\n\n///<summary>\n///资源地址\n///</summary>\n[JsonPropertyName(&34;)]\npublicstringSrc{get;set;}=&34;;\n}\n}\n\n
wwwroot\\app.js
varplayer=null;\n\nexportfunctionloadPlayer(instance,id,options){\nconsole.log(&39;,id);\nplayer=videojs(id,options);\n\nplayer.ready(function(){\nconsole.log(&39;);\nvarpromise=player.play();\n\nif(promise!==undefined){\npromise.then(function(){\nconsole.log(&39;);\n}).catch(function(error){\nconsole.log(&39;,error);\ninstance.invokeMethodAsync(&39;,&39;+error);\n});\n}\ninstance.invokeMethodAsync(&39;,true);\n});\n\nreturnfalse;\n}\n\nexportfunctiondestroy(id){\nif(undefined!==player&&null!==player){\nplayer=null;\nconsole.log(&39;);\n}\n}\n
10.页面调用
<divclass=&34;>\n\n<divclass=&34;>\n<VideoPlayerSourcesType=&34;SourcesUrl=&34;Debug=&34;/>\n</div>\n<divclass=&34;>\n<VideoPlayerSourcesType=&34;SourcesUrl=&34;/>\n</div>\n<divclass=&34;>\n<VideoPlayerSourcesType=&34;SourcesUrl=&34;/>\n</div>\n</div>\nPLAINTEXT复制全屏
项目源码
Blazor100:Blazor鍏ラ棬100澶?-Gitee.com
https://gitee.com/densen2014/Blazor100/tree/master/b13video
知识共享许可协议
本作品采用知识共享署名-非商业性使用-相同方式共享4.0国际许可协议进行许可。欢迎转载、使用、重新发布，但务必保留文章署名AlexChow，不得用于商业目的，基于本文修改后的作品务必以相同的许可发布。如有任何疑问，请与我联系。
AlexChow
今日头条|博客园|知乎|Gitee|GitHub
好了，本文到此结束，如果可以帮助到大家，还望关注本站哦！