Maison > interface Web > Tutoriel H5 > Résumé des éléments de lecture multimédia audio et vidéo dans les conseils du didacticiel HTML5_html5

Résumé des éléments de lecture multimédia audio et vidéo dans les conseils du didacticiel HTML5_html5

WBOY
Libérer: 2016-05-16 15:45:57
original
2223 Les gens l'ont consulté

L'encodeur/décodeur audio et vidéo est un ensemble d'algorithmes utilisés pour encoder et décoder un flux audio ou vidéo spécifique afin que l'audio et la vidéo puissent être lus. Les fichiers multimédias bruts sont de très grande taille et s'ils ne sont pas codés, les données qui composent un clip vidéo et audio peuvent être si volumineuses qu'il faut un temps insupportable pour se propager sur Internet. Sans décodeur, le récepteur ne peut pas réassembler les données codées dans les données multimédia d'origine. Les codecs peuvent lire un format de conteneur spécifique et décoder les pistes audio et vidéo qu'il contient.
Comprendre les éléments multimédias
1.Opération de base : déclarer les éléments multimédias

Code XML/HTMLCopier le contenu dans le presse-papiers
  1. <audio commandes src="Adele-Set Fire À la pluie.mp3">
  2. Le navigateur que vous utilisez ne prend pas en charge l'audio HTML5
  3. audio>

L'attribut Controls dans le code indique au navigateur d'afficher les commandes utilisateur courantes, notamment le démarrage, l'arrêt, le saut et le contrôle du volume. Si l'attribut CONTROLS n'est pas spécifié, l'utilisateur ne pourra pas lire l'audio sur la page.
2. Utilisez l'élément source
Dans le cas le plus simple, l'attribut src peut pointer directement vers le fichier multimédia. Cependant, que se passe-t-il si le navigateur ne prend pas en charge le conteneur ou l'encodeur concerné ? Cela nécessite l'utilisation de déclarations de sauvegarde. Plusieurs sources peuvent être incluses dans la déclaration de secours, et le navigateur peut choisir parmi autant de sources :

Code XML/HTMLCopier le contenu dans le presse-papiers
  1. <audio commandes>
  2. <source src="Adèle- Mettre le feu à la pluie.mp3" >
  3. <source src="Adèle- Mettre le feu à la pluie.ogg" >
  4. audio>

Pour les sources, le navigateur jugera selon l'ordre de déclaration. Si plusieurs sont prises en charge, le navigateur choisira la première source prise en charge.
3. Contrôle multimédia
En définissant l'attribut de lecture automatique dans l'élément audio ou l'élément vidéo, le fichier audio ou vidéo sera automatiquement lu après le chargement sans aucune interaction de l'utilisateur.
Fonctions de contrôle couramment utilisées

函数 动作
load() 加载音频/视频文件,为播放做准备,通常情况下不必调用,除非是动态生成的元素。用来在播放前预加载。
play() 加载(有必要的话)并播放音频/视频文件。除非音频/视频已经暂停在其他位置了,否则默认从头开始播放
pause() 暂停处于播放状态的音频/视频文件
canPlayType(type) 测试video元素是否支持给定MIME类型的文件

Propriétés multimédia en lecture seule
只读特性
duration 整个媒体文件的播放时长,以s为单位。如果无法获取时长,则返回NaN。
paused 如果媒体文件当前被暂停,则返回true。如果还未开始播放,则返回false。
ended 如果媒体文件已经播放完毕,则返回true
startTime 返回最早的播放起始时间,一般是0.0,除非是缓冲过的媒体文件,并且一部分内容已经不在缓冲区
error 在发生了错误的情况下返回的错误代码
currentSrc 以字符串形式返回当前正在播放或已加载的文件。对应于浏览器在source元素中选择的文件。

Valeurs des propriétés scriptables
特性
autoplay 将媒体文件设置为创建后自动播放,或者查询是否已设置为autoplay
loop 如果媒体文件播放完毕后能重新播放则返回true,或者将媒体文件设置为循环播放(或者不循环播放)
currentTime 以s为单位返回从开始播放到现在所用的时间。在播放过程中,设置currentTime来进行搜索,并定位到媒体文件的特定位置
controls 显示或隐藏用户控制界面,或者查询用户控制界面当前是否可见
volume 在0.0到1.0之间设置音频音量的相对值,或者查询当前音量的相对值。
muted 为音频文件设置静音或者消除静音,或者渐层当前是否为静音
autobuffer 通知播放器在媒体文件开始播放前,是否进行缓冲加载。如果媒体文件已经设置为autoplay,则忽略测特性。

3.1 Utiliser des éléments audio et vidéo
L'élément vidéo HTML5 est très similaire à l'élément audio, mais possède quelques fonctionnalités supplémentaires que l'élément audio.
特性
poster 在视频加载完成之前,代表视频内容的图片的URL地址,可以想象一下“电影海报”。该特性不仅可读,而且可以修改,以便更换图片
width、height 读取或设置显示尺寸。如果设置的宽度与视频本身大小不匹配,可能导致居中显示,上下或左右可能出现黑色条状区域。
videoWidth、videoHeight 返回视频固有的或自适应的宽度和高度。只读video元素还有一个audio元素不支持的关键特性:可被HTML5 Canvas的函数调用。

Astuce : lorsque le canevas utilise la vidéo comme source de dessin, seule l'image en cours de lecture est dessinée.

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal